在不显示任何内容的情况下获取拖动事件

Question

下面的页面使用了angular-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>

因此，我可以将DIVs从"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();
    }
});

我用上面的代码制作了这个简单的可拖动的演示，没有使用Angular：http://jsfiddle.net/tikosar/u2h332Lw/。我想你可以很容易地根据你的需要来调整它。