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

这会将克隆项目的id 更新为唯一。第一个新掉落的物品将有一个属性：id="drag_website-1"。因为length 将是0。