Получение Drag-событие, не показывая ничего

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 UI можно установить 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/. Я думаю, вы можете легко настроить его на свои нужды.