JQuery UI, как я могу добавить клик на перетаскиваемом элементе

Question

У меня есть элемент типа div, Я хочу перетащить его поверх элемента сброса с помощью клона, а затем сделать его активируемым, чтобы я мог открыть связанные свойства. 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 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

Расширяя мой комментарий, вы можете увидеть этот пример.

$(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>

Вы можете не связывать его в цепочке, если вам нужно сослаться на обратный вызов или сам элемент.

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

Это помогает обеспечить отсутствие неоднозначных this объектов.

Обновление

Перед добавлением клонированного элемента вы можете сосчитать и обновить текущие продукты, которые были перетащены в список.

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));
  });
}

Обновляет id клонированного элемента, чтобы он стал уникальным. Первый новый выпавший предмет будет иметь атрибут: id="drag_website-1". Поскольку length будет 0.