CODEWITHSUNDEEP
jquerycssdrag-and-drop
naughtylus
naughtylus

Reputation: 23

Implementing a Drag and Drop feature on Jquery/HTML

I need to create a drag and drop feature for a page on my website that allows the user (once logged in) to drag a picture that they like or favorited into a 'closet' that they make. I've been trying Jquery draggable but it's not how I want it to work.

It's basically like when you try to drag a file into recycle bin.

What are the basic approaches to this? I already have my images dynamically pulled (when a user 'likes' a picture, it'll pop up in the closet page). All I need is to have this drag and drop functionality to work.

Upvotes: 1

Views: 386

Answers (1)

juanp_1982
juanp_1982

Reputation: 1007

what you need is to configure your draggable object to revert in invalid and your droppable only accept a draggable object then on drop you can execute a function and do whatever you want, 

<div id="my-draggable"></div>


<div id="my-droppable"></div> 
<script>
    $("#my-draggable").draggable({ revert: "invalid" });
    $("#my-droppable").droppable({ 
        accept: "#my-draggable",
        drop: function( event, ui ) {
            //do whatever you want in here
        } 
});

Upvotes: 1

Related Questions