I have two droppable and two draggable elements On doc ready all the droppable events fire. After which when dragging an element over the droppable element no droppable events fire
The draggable events seem ok though I have not really tested them, I have been concentrating on the bizarre behaviour of the droppable.
The code:
$(document).ready(function() {
$("#sectionDZ").droppable({
scope: "subject",
activate: alert("Droppable activate event fired"),
create: alert("Droppable create event fired"),
deactivate: alert("Droppable deactivate event fired"),
drop: alert("Droppable drop event fired"),
out: alert("Droppable out event fired"),
over: alert("Droppable over event fired"),
accept: "sectnLI",
});
$(".sectnLI").draggable({
cursor: "crosshair",
delay: "300",
helper: 'clone',
opacity: "0.65",
placeholder: 'ui-state-highlight',
revert: "invalid",
scope: "subject",
stop: function (event, ui) {
alert("Drag stop event has fired");
// $(this).draggable("destroy");
}
}); // Allow more than one item to be dragged
$("#judgeDZ").droppable({
activate: alert("Droppable 2 activate event fired"),
create: alert("Droppable 2 create event fired"),
deactivate: alert("Droppable 2 deactivate event fired"),
drop: alert("Droppable drop event fired"),
out: alert("Droppable 2 out event fired"),
over: alert("Droppable 2 over event fired"),
scope: "judge",
accept: "judgLI",
});
$(".judgLI").draggable({
cursor: "crosshair",
delay: "300",
helper: 'clone',
opacity: "0.65",
placeholder: 'ui-state-highlight',
revert: "invalid",
scope: "subject",
stop: function (event, ui) {
alert("Drag stop event has fired");
// $(this).draggable("destroy");
}
}); // Allow more than one item to be dragged
});
This is in it's own file, there is another .js file containing ui tabs and dialogs code. Thanks for any help with this.