獲取拖動事件而不顯示任何內容

Question

我有使用角的DragDrop「ngDragDrop」（使用jQueryUI的-的DragDrop）

下面的代碼工作如下頁面：

<div class="sourceContainer"> 
    <div ng-repeat="oldLocation in oldLocations" 
     data-drag="true" 
     data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" 
     ng-model="oldLocation" 
     jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep'}" 
     class="oldLocation singleTag" 
     >{{oldLocation.name}}</div> 
</div> 
<div class="targetContainer" data-drop="true" ng-model='oldLocationsCopied' jqyoui-droppable="{multiple:false}"> 
    <div ng-repeat="newLocation in oldLocationsCopied track by $index" 
     data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" 
     class="oldLocation singleTag" 
     ng-model="newLocation" jqyoui-draggable="{index: {{$index}},animate:true,onDrop:doDrop(newLocation.name)}">{{newLocation.name}} 
    </div> 
</div> 

所以我可以拖動&將DIV從「sourceContainer」內部拖放到「targetContainer」，當我這樣做時，會調用函數「onDrop（）」。

現在我想要沒有任何可見的行動相同。當一個div被拖拽時，它應該消失，onDrop（）方法應該被調用。

我可以只隱藏targetContainer但應該有一個更好的解決方案

Answer 1

在jQuery用戶界面，您可以設置helper到要拖動反饋的DOM元素。請參閱文檔：http://api.jqueryui.com/draggable/#option-helper

但似乎將其設置爲除original之外的任何內容都會阻止在拖放後更新可拖動元素的位置。如果你想使配置更新，你應該自己做，像這樣：

$('.draggable').draggable({ 
    helper: function() { 
     return $('<div>').appendTo($('body')); 
    }, 
    stop: function(e, ui) { 
     $(this).css({position: 'relative', left: ui.position.left, top: ui.position.top}).show(); 
    }, 
    start: function() { 
     $(this).hide(); 
    } 
}); 

我做了上面的代碼這個簡單的拖動演示無角：http://jsfiddle.net/tikosar/u2h332Lw/。我認爲您可以輕鬆地根據您的需求進行調整。