Drag and drop not working with jqxtree

Question

I use jqxTree to view my tree. I want to drag some element and drop on Droppable area.

$(".dragItem").draggable({
   revert: "true",
   revertDuration: 0,
   helper: 'clone',
   cancel : 'span',
   refreshPositions: true,
   containment: "parent"
 });

$(".dragItem").css({"position": ""});

$("#log").droppable({
    accept: ".dragItem",
    drop: function(event){
    alert("Dropped");
   }
});

Above Code is given in fiddle. Can anyone say why the drag and drop is not working Fiddle

Any ideas or suggestions will be helpful.

Answer 1

Add the dragEnd handler to your tree config like below. The event argument passed to this handler has plenty of info, I just used some for demo purpose. Check fiddle: Fiddle.

  $('#jqxTree').jqxTree({
       height: '300px',
       ...
       dragEnd: function (event) {
          $('#log').append(event.label);
       }
   });

Answer 2

Seems that alert was mistyped, I've updated the code

 drop: function(event){
//alert();
}

http://jsfiddle.net/1fzqtzsz/1/