How to drop the draggable div when onclick on it?

Question

I have an element which needs to drop into droppable(Jquery UI droppable) div while drag and drop(works perfect), but i need to drop the same element while onclick on it.

Reason why i need the above said functionality: The code gets repeat while used separate code to clone and append the element into droppable div when onclick. I need to use same code for both. How to pass the onclicked element (draggable element) into drop function.?

$(document).ready(function() 
{
    var cloned_element;

    $("#draggable").draggable({
        helper: 'clone',
        revert: true
    });

    $("#droppable").droppable(
    { 
        drop: function(event, ui) 
        {
            cloned_element = $(ui.helper).clone();
            ui.helper.remove();
            cloned_element.appendTo(this);

            $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
        }
    });

    $('#draggable').on('click',function()
    {
        $(this).trigger("drop", $('#droppable'));
    });    
});

Sample code in Jsfiddle..!

can you elaborate. So you dont want drag and drop functionality ? On click of draggable ,, it should drop into droppable ? — Amar Singh, Jul 22 '16 at 11:13
@ Yo Yo.. I used both drag and drop, and also onclick to append element into droppable div. I used the dropped div to make resize, rotate, like various functionalities inside the droppable div, so these codes get repeat when i used seperate function for onclick. — ArunValaven, Jul 22 '16 at 11:19

Amar Singh · Answer 1 · 2016-07-22T11:52:19.293

0

I dont think you can trigger drag drop functionality on click . But you can do something like this

 $('#draggable').on('click',function()
        {
            cloned_element = $("#draggable").clone();
            cloned_element.attr("id","").css("position","absolute");
            cloned_element.find("p").html("Dropped!");
            cloned_element.appendTo("#droppable");
        });

Working demo

Demo for your second query. - how to assign resizable() to all dropped elements.

edited Jul 22 '16 at 11:52

answered Jul 22 '16 at 11:23

Amar Singh

5,464
2
26
55

@ Yo Yo... I don't need this separate function. I have this code. when i use Jquery UI resizable or other functionality to the cloned element, i need to repeat the code for both drag-dropped and onclicked functions. Can you understand what i need..? Please help me – ArunValaven Jul 22 '16 at 11:30
@ Yo Yo.. or any other way to pass the onclicked element into drop function..? – ArunValaven Jul 22 '16 at 11:33
@ArunValaven : your question was **How to drop the draggable div when onclick on it?** which I answered. ok i will try to fix this too – Amar Singh Jul 22 '16 at 11:35
@ Yo Yo.. Can you prescribe me how i can change the question for better understanding..? Thanks for your future effort to solve my issue. – ArunValaven Jul 22 '16 at 11:39
1

@ArunValaven : what you can do is assign a same class (say `.dropped_box`) to all the dropped elements (created by click or drag) and assign that class with any JQuery-UI functionality - `.resizable();` or whatever . It should work – Amar Singh Jul 22 '16 at 11:40
@ArunValaven : see my Updated answer for second demo. Your solution is there – Amar Singh Jul 22 '16 at 11:52
@ Yo Yo.. Yes.... That code also i have.. I used the way used the resizable() function. But i your demo itself shows my problem(code repetation, used resizable for both function).. Thanks.. – ArunValaven Jul 22 '16 at 11:57
1

@ArunValaven : see both are different events . you need assign the functionalities to both the events. , or call a function in both events , which will contain all the declared jquery functionalities you want to add – Amar Singh Jul 22 '16 at 12:05
@ Yo Yo.. So in my code which is best to use.? Assign same class name for all drag-drop and onclick elements Or calling a same function in both functions..? – ArunValaven Jul 22 '16 at 12:18
see if are adding a class then you need to handle the delegate event handler too . Better make a separate function declare all functionalities in it .. run that function AFTER every time you add the element – Amar Singh Jul 22 '16 at 12:29
@ Yo Yo.. Can you able to give a demo to implement this function using delegate event handler..? just by simply assigning resizable functionality for both function. – ArunValaven Jul 22 '16 at 12:35
@ArunValaven .. Yes , see this answer http://stackoverflow.com/questions/31512442/apply-jqueryui-resizable-widget-to-dynamically-created-elements – Amar Singh Jul 22 '16 at 12:37
@ Yo Yo.. ok Thanks – ArunValaven Jul 22 '16 at 12:40

How to drop the draggable div when onclick on it?

1 Answers1