jQueryUI的拖放正下降：克隆不會放棄

Question

我打一點點拖&下降UI，和我有點難倒了DROP。
您可以see the Fiddle here。

近期目標：
我只需要找出如何讓.draggable跨度爲任.droppable的div。
假設我在append()的正確道路上，我如何訪問克隆的內容？

最終目標：
最終，我將需要添加的方式做刪除落區的div項目和限制.textfield輸入/ div來只接受單一下垂（.textarea輸入/ DIV能接受無限數量的「有效載荷」）。

CODE：

/* html */ 
<table> 
    <thead>  
     <tr role="row"> 
      <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 494px;" aria-sort="ascending" aria-label="Company: activate to sort column descending">Company</th> 
      <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 66px;" aria-label="Contact">Contact</th> 
      <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 79px;" aria-label="&amp;nbsp;">&nbsp;</th> 
     </tr> 
    </thead> 
    <tbody role="alert" aria-live="polite" aria-relevant="all"> 
     <tr class="odd"> 
      <td class="sorting_1 has_draggable_children"> 
       <span draggable="true" class="ui-draggable" data-companyid="0101" data-companyname="**BD">**BD</span> 
      </td> 
      <td><a href="#4621">Contacts</a></td> 
      <td><a href="#4621">Edit</a> 
       <a href="#4621">Delete</a> 
      </td> 
     </tr> 
     <tr class="even"> 
      <td class="sorting_1 has_draggable_children"> 
       <span draggable="true" data-companyid="0202" data-companyname="0024" class="ui-draggable">0024</span> 
      </td> 
      <td><a href="#4438">Contacts</a></td> 
      <td><a href="#4438">Edit</a> 
       <a href="#4438">Delete</a> 
      </td> 
     </tr> 
     <tr class="odd"> 
      <td class="sorting_1 has_draggable_children"> 
       <span draggable="true" class="ui-draggable" data-companyid="0303" data-companyname="Acme, Inc.">Acme Anvil Corp</span> 
      </td> 
      <td><a href="#4621">Contacts</a></td> 
      <td><a href="#4621">Edit</a> 
       <a href="#4621">Delete</a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

<section class="offset7" id="dragged-drop-zone" > 
    <div class="look-like-input textfield droppable" contenteditable></div> 
    <br /> 
    <div class="look-like-input textarea droppable" contenteditable></div> 
</section> 

。

/* js */ 
// DRAG 
$('span[draggable]').draggable({ 
    revert: true, 
    helper: "clone" 
}); 

// DROP 
$('.droppable').droppable({ 
    tolerance: 'pointer', 
    drop: function(event, ui) { 
     //console.log(this); 
     $(this).append($(ui.helper)); 
    } 
}); 

任何及所有幫助和建議，歡迎

Answer 1

好吧......到了它的底部。

The clone只是似乎沒有按照預期的方式運作。
您最終不得不使用自定義函數將自己的克隆打包到對象中，然後將其從drop中的對象中拉出。

你可以see the working example here關於jsFiddle。
這裏是結束了工作：

// Drag 
$('span[draggable]').draggable({ 
    revert: true, 
    helper: function() { 
     var container = $('<div/>'); 
     var dragged = $(this); 
     container.append(dragged.clone()); 
     return container; 
    } 
}); 

// Drop 
$('.droppable').droppable({ 
    tolerance: 'pointer', 
    drop: function(event, ui) { 
     $(this).append($(ui.helper.children())); 
    } 
});