jQuery UI 如何在拖动的元素上添加点击

Posted 2023-05-08

【中文标题】jQuery UI 如何在拖动的元素上添加点击

【英文标题】：jQuery UI how can I add click on dragged element

【发布时间】：2018-10-17 13:22:22

【问题描述】：

我有一个 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>

【问题讨论】：

当元素或克隆被删除时，你可以在那个时候给它绑定一个click回调。您可以在.appendTo() 之后链接.click()。

【参考方案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。

【讨论】：

@Shareque 有几种方法可以做到这一点。我通常根据短语和数字创建 ID。 webpage-1 可能是一个很好的例子。然后，您可以使用 length 计算当前现有元素，然后创建一个 IS，例如 .attr("id", "webpage-" + count)。