1

我有以下页面使用 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 但应该有更好的解决方案

4

1 回答 1

0

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

于 2015-05-02T15:02:57.950 回答