Getting Drag-Event without displaying anything

Question

I have the following page using angular-dragdrop "ngDragDrop" (which uses the jQueryUI-Dragdrop)

the following code WORKS:

<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>

So I can drag&drop DIVs from inside "sourceContainer" to "targetContainer" and the function "onDrop()" is called when I do that.

Now I want the same without ANY visible action. When a div is dragged, it should just disappear and the method onDrop() should be called.

I could just hide the targetContainer but there should be a better solution

score 0 · Answer 1 · answered May 02 '15 at 15:02

In jQuery UI you can set helper to the DOM element you want to be dragged for feedback. See docs: http://api.jqueryui.com/draggable/#option-helper

But it seems that setting it to anything but original will prevent from updating the position of the draggable element after drop. If you want that positioned updated, you should do it yourself like so:

$('.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();
    }
});

I made this simple draggable demo with the code above without Angular: http://jsfiddle.net/tikosar/u2h332Lw/ . I think you can adjust it to your needs easily.

Getting Drag-Event without displaying anything

1 Answers1