CODEWITHSUNDEEP
jqueryjquery-uidrag-and-dropjquery-ui-draggable
Sarthak Sharma
Sarthak Sharma

Reputation: 769

Why clone of a draggable element is reverting when dropped in a droppable div in Jquery ui?

I want to make image draggable on the given div. I want to use clone of small image to be dragged and drop into the div. My code is

HTML

    <div class="option" id="f">
    <img class="options" src="http://lorempixel.com/output/people-h-g-49-66-3.jpg" alt=""/>
</div>
<div class="lame">
    <img src="http://placehold.it/350x150" alt=""/>
</div>

jQuery

              $(function() {
    $( ".options" ).draggable({ cursor: "pointer",opacity: 0.6,helper: "clone"
        });
    $(".lame").droppable({ accept:".options"
    });
});

This code work fine if I don't use the helper:"clone". What can be the right method to do this drag n drop process proper using new jQuery and jQuery ui version. the Jsfiddle is here.

Upvotes: 1

Views: 1041

Answers (1)

Trevor
Trevor

Reputation: 16116

Modify your .lame.droppable( code to the following.

$(".lame").droppable({ accept:".options",drop: function(event, ui) {
    $.ui.ddmanager.current.cancelHelperRemoval = true;}
});

Upvotes: 3

Related Questions