JQuery перетаскивание не показывает тащило пункт после падения в список

Question

Я следующий Javascript кода:

$(document).ready(function() { 
    $(".NewsItemDraggable").draggable({ revert: "invalid" }); 
    $(".RelatedNewsDropDiv").droppable({ 
     accept: ".NewsItemDraggable", 
     activeClass: "ui-state-hover", 
     hoverClass: "ui-state-active", 
     drop: function (event, ui) { 
      AddReletedNewsItem(ui.draggable, $(this)); 
     } 
    }); 
    function AddReletedNewsItem($draggedItem, $dropArea) {     
     var $list = $("ul", $dropArea).length ? 
        $("ul", $dropArea) : 
        $("<ul/>"); 
     $dropArea.append($list.append($("<li>").append($draggedItem))); 
    } 
}); 

HTML:

<-- Multiple occurance of following div--> 
<div class="NewsItemDraggable" style="margin-top: 5px"> 
    Some html stuff here 
    <div class="RelatedNewsDropDiv"> 
     Drop Related News Items Here 
    </div> 
</div> 

Когда я перетащить любой NewsItemDraggable в RelatedNewsDropDiv другого NewsItemDraggable в это создает новое но не отображает содержимое перетаскиваемого NewsItemDraggable. В чем проблема? Будем рады, если дано какое-то руководство.

UPDATE:

После просмотра веб-это выглядит как это может быть связано с JQuery Сортируемый, но я не могу понять, как/что, или это действительно связаны?

Answer 1

проверить это, сделал некоторые изменения jsfiddle.net/DgAd7/13/

Я использую помощник: «клон»