CODEWITHSUNDEEP
jqueryjquery-uidraggablehelper
Petar Vasilev
Petar Vasilev

Reputation: 4745

jQuery Draggable Helper stop automatic removal

I've having a problem where I am using the jQuery ui draggable functionality with the helper option( helper: 'clone' ) - it all works great but when you stop dragging the helper is being removed and I really need it to stay in the DOM. Any help as to how to keep it in the DOM much appreciated!!

I've tried adding "stop" function with the following:

event.preventDefault();

that prevents the helper to be removed but the dragging functionality no longer works.

Here is the full code I have:

$( "#draggable" ).width(faceWidth).height(faceHeight).draggable({
                helper : getHelper,
                containment: "#containment-wrapper",
                scroll: false,
                revert: 'invalid',
                cursor: 'move',

                drag: function(event, ui) {
                    var position = ui.helper.position();
                    $('.face').css('top', position.top).css('left',position.left);
                    draggableLeft = position.left;
                    draggableTop = position.top;
                },
                stop: function( e, ui ) {
                    // e.preventDefault();
                }
            });

UPDATE: here is the html code:

<div id="image">
     <div class="player">
         <img src="images/app/player.png" alt="" />
     </div>
     <div class="face">
         <img src="images/app/face.jpg" alt="" />
     </div>
     <div id="draggable"></div>
     <div id="resizable"></div>
</div>

Upvotes: 3

Views: 1900

Answers (1)

Trevor
Trevor

Reputation: 16116

Here is one way to do it. 

$( "#draggable" ).draggable({
            helper : "clone"
});
$( "body" ).droppable({
    drop: function( event, ui ) {
        $(ui.helper).removeClass('ui-draggable-dragging');
        var newDiv = $(ui.helper).clone().removeClass('ui-draggable-dragging');
        $(this).append(newDiv);
  }  
});

http://jsfiddle.net/Jje3H/

And if you want to make subsequent clones draggable as well then take a look at this example.

http://jsfiddle.net/Jje3H/1/

Or if you just want to be able to move subsequent clones then:

http://jsfiddle.net/Jje3H/2/

Upvotes: 1

Related Questions