drag and drop jquery

1
votes

I've a problem with jquery drag and drop. I want to get x,y , when mouse dropped . My problem is the drop function not executed .

that is my code 

function DragDrop(ar)
{
var a=0;
for(a=0;a<ar.length;a++)
{
$(document).ready(function() {
$("#" + ar[a]).draggable();
$("#" + ar[a]).droppable({
drop: function() { alert('dropped'); }
});
});
}
}
3
javascriptjquerydrag-and-drop

3 Answers

1
votes

Click View Source on this page

http://jqueryui.com/demos/droppable/

Notice that draggable and droppable are two different elements

Your code shows both draggable and droppable as being $("#" + ar[a])

That is probably what went wrong

0
votes

You might be looking for something more like this: Example

function DragDrop(ar) {
    var a = 0;
    for (a = 0; a < ar.length; a++) {
        $("#" + ar[a]).draggable().mouseup(function() {
            var p= $(this).position();
            $('#output').html('x: ' + p.left + ', y: ' + p.top);
        });;
    }
}

HTML used in above example

<div id="output"></div>
<div id="asdf" ></div>
0
votes
$( ".selector" ).droppable({
   drop: function(event, ui) { ... }
});

in event you will get event.x and event.y