在不显示任何内容的情况下获取 Drag-Event答案

【问题标题】：Getting Drag-Event without displaying anything在不显示任何内容的情况下获取 Drag-Event
【发布时间】：2015-07-12 05:58:02
【问题描述】：

我有以下页面使用 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>

所以我可以将 DIV 从“sourceContainer”中拖放到“targetContainer”，并且在执行此操作时会调用函数“onDrop()”。

现在我想要没有任何可见动作的相同。当一个 div 被拖动时，它应该会消失并且应该调用 onDrop() 方法。

我可以隐藏 targetContainer 但应该有更好的解决方案

【问题讨论】：

标签： angularjs jquery-ui angular-dragdrop

【解决方案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/。我认为您可以轻松地根据自己的需要进行调整。

【讨论】：