Drag and Drop in ASP.Net

peter

I want to get the value of label LabRef and pass to Ajax function for processing. At moment i am retrieving value of hidden field from draggable div inside Repeater control but now need to pass the label value also.

function OnDragStart(e) {

    e.dataTransfer.effectAllowed = 'move';

    e.dataTransfer.setData('text', $(this).find('HiddenField[ID*="HiddenField1"]'));
}
function OnDrop(e) {
  

 $(this).append("" + e.dataTransfer.getData('text') + "");

        var data = new Array(1);
        $("#img1 div").each(function (index) {
            data[index] = "'" + this.innerHTML + "'";

        });

        function sendMyAjax(URL_address) {
            $.ajax({
                type: 'POST',
            
                url: URL_address,
                contentType: "application/json; charset=utf-8",
                data: '{products:[' + data.join() + ']}',
                dataType: 'json',
                success: function (results) { alert(results.d); },
                error: function () { alert('error'); }
            }); return false;
        };

}

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh4y ago
Accepted answer
@Peter,

when you are droping the dragged area you doing 2 things
1. you are assigning the source inner html (e.dataTransfer.getData('text')) to the div data-product-name
2. you are assigning the destination inner html (this.innerHtml) to the array.

as you can see you are just sending the array through the ajax so it will just post the destination inner-html.

to send both do this instead
var data = [];
$("#img1 div").each(function (index) {
data.push(
{
productName: $(".selectedproduct").attr("data-product-name"),
productValue: this.innerHTML
});

});


var productName= $.map(data, function(obj){
return obj.productName
}).join();
var productValue= $.map(data, function(obj){
return obj.productValue
}).join();
$.ajax({
                type: 'POST',

                url: URL_address,
                contentType: "application/json; charset=utf-8",
                data: {"productName":productName,"productValue":productValue},
                dataType: 'json',
                success: function (results) { alert(results.d); },
                error: function () { alert('error'); }
            }); return false;
peter4y ago
i have not shown all the code.

originally you could drag a series of items before processing server side using ajax once button clicked. i converted it to sending individual items so i gather i dont need an array to store and process individual values?

what i do require is to send both the hiddenfield value and also the MessageType value to the webMethod via Ajax.

So how do you reference LabRef label and add both these values to the e.dataTransfer.setData method then process via Ajax method ?

The answer helped me accomplish what i wanted!

Thanks