jqueryhtmldraggabledroppable

Jquery Draggable and droppable but doesn't accept other droppabe elements


I want the jquery line that make my div draggable but not accept to be droppable

I have elements that is draggable and droppable but I don't want this div to act the same I just want it to be draggable but not droppable with anything


Solution

  • Assuming you mean the .draggable() and .droppable() jQuery UI functions, you can use the accept parameter to only accept certain elements to be droppable. This is shown on the jQuery UI reference page for droppable:

    $(function () {
        $("#draggable, #draggable-nonvalid").draggable();
        $("#droppable").droppable({
            accept: "#draggable",
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function (event, ui) {
                $(this)
                    .addClass("ui-state-highlight")
                    .find("p")
                    .html("Dropped!");
            }
        });
    });
    

    The above code will make #draggable and #draggable-nonvalid elements draggable, #droppable droppable, and will make only #draggable be accepted by #droppable.

    Link/Source - jQuery UI