jQuery UI how can I add click on dragged element

Question

I have an element which is div type, I want to drag it over a droppable element with a clone and then make it clickable so that there I can open related properties. HTML

<div id="drag_website" class="d product">
    <p>Website</p>
    </div>

    <div id="drag_phone" class="d product2">
    <p>Phone</p>
    </div>

    <div id="droppable_container" class="ui-draggable-helper">
      <p>Drop your content here!!</p>
    </div>

Script

<script type="text/javascript">
  $( document ).ready(function() {

    $('.d').draggable({
     containment: "window",
     helper: "clone",


    });


    $( "#droppable_container" ).droppable({
    accept: ".product",

    drop: function( event, ui ) {
       $(ui.draggable).clone().appendTo($(this));
       console.log('element dropped');
    }    

    });

    // Getter
    var accept =$('#droppable_container').droppable("option", "classes.ui-droppable" );
    var str = JSON.stringify(accept);
    console.log('element  ::: ' + accept);


});
</script>

Answer 1

Expanding upon my comment, you can see this example.

 $(function() { $('.drag').draggable({ containment: "window", helper: "clone", }); $("#droppable_container").droppable({ accept: ".product", drop: function(event, ui) { $(ui.draggable).clone().appendTo($(this)).click(function() { console.log("Dropped item clicked."); }); console.log('element dropped'); } }); // Getter var accept = $('#droppable_container').droppable("option", "classes.ui-droppable"); var str = JSON.stringify(accept); console.log('element ::: ' + accept); }); 

 .drag { border: 1px solid #ccc; border-radius: 6px; display: inline-block; padding: .2em .4em; } .drag p { display: inline-block; margin: 0; } .drop { border: 1px solid #ccc; border-radius: 6px; padding: .25em; margin: 20px 10px; min-height: 100px; } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="ui-widget"> <div id="drag_website" class="drag product"> <i class="fas fa-file-code fa-2x fa-fw"></i> <p>Website</p> </div> <div id="drag_phone" class="drag product2"> <i class="fas fa-phone-square fa-2x fa-fw"></i> <p>Phone</p> </div> <div id="droppable_container" class="drop"> <p>Drop your content here!!</p> </div> </div> 

You may consider not chaining it in case you have to reference the callback or the element itself.

drop: function(e, ui){
  var $self = $(this);
  var $myItem = $(ui.draggable).clone();
  $myItem.appendTo($self).click(function(event){
    console.log("event ::: click, ",  $(this));
  });
}

This helps ensure there is no ambiguous this objects.

Update

Before appending the cloned element, you can count and update the current products that have been dragged into the drop are.

drop: function(e, ui){
  var $self = $(this);
  var $myItem = $(ui.draggable).clone();
  var c = $(".product", $self).length + 1;
  $myItem.attr("id", $self.attr("id") + "-" + c);
  $myItem.appendTo($self).click(function(event){
    console.log("event ::: click, ",  $(this));
  });
}

This updates the id of the cloned item to be unique. The first new dropped item will have an attribute: id="drag_website-1" . As the length would be 0 .