Question

我几天前刚刚开始使用JQuery UI，允许在我的主页上进行拖放和排序。在下面显示的代码中，我想添加＆＃34; +＆＃34;和＆＃34; - ＆＃34;纠正方程＆＃34; 1_2_3 = 6＆＃34;，所以＆＃34; +＆＃34;必须放弃两次才能使方程正确。

目前，它几乎完美无缺。我可以添加尽可能多的＆＃34; +＆＃34;和＆＃34; - ＆＃34;如我所愿，我可以将它们分类到等式中。唯一的问题是，我无法删除任何＆＃34; +＆＃34;或＆＃34; - ＆＃34;。

你能否给我任何提示，如何通过将标志移出可排序窗口来删除标志？

感谢您的帮助！

<html>
<head>

  <style>


  #draggable { list-style-type: none; margin: 0; padding: 0; }
  #draggable li { display: inline-block; margin: 1%; padding: 1%; font-size: 10vw; text-align:center; min-width:20px; border-style: solid; border-width: medium; border-color:black; background-color:grey;}

  #sortable { float:left; list-style-type: none; width:100%; }
  #sortable li { display: inline-block; margin: 0; padding: 0; font-size: 10vw; text-align:center; min-width:20px;}


  </style>
  <script src="jquery-1.12.4.js"></script>
  <script src="jquery-ui.min.js"></script>
  <script>
  $( function() {

    $( ".clone").draggable({
        cursor:"move",
        revert: "invalid",
        connectToSortable: '#sortable',
        helper: 'clone'
    });

    $( "#sortable").sortable({
      connectWith: "ul",
      cancel: ".ui-state-disabled",
    });


  } );
  </script>
</head>
<body>


<ul id="draggable">
  <li class="clone">+</li>
  <li class="clone">-</li>
</ul>


<ul id="sortable">
  <li class="ui-state-disabled">1</li>
  <li class="ui-state-disabled">2</li>
  <li class="ui-state-disabled">3=6</li>
</ul>



</body>
</html>

Answer 1

您可以在将UI组件放入div中时创建div，然后删除已删除的组件。

示例代码。

//HTML

<div class="removeDiv">
  <p>Drop to remove</p>
</div>

//Style
.removeDiv{
    width:100px;
    height:100px;
    background-color:red;
    margin-top:150px;
  }

//Script
$('.removeDiv').droppable({
    over: function(event, ui) {
        ui.draggable.remove();
    }
});

这应该可以完成你的工作。这是上述代码的小提琴。 JS Fiddle

Answer 2

扩展我的评论。您的代码可能看起来像这样。

$(function() {
  $(".clone").draggable({
    cursor: "move",
    revert: "invalid",
    connectToSortable: '#sortable',
    helper: 'clone'
  });
  $("#sortable").sortable({
    connectWith: "ul",
    cancel: ".ui-state-disabled",
  });
  $(".trash").droppable({
    accept: "#sortable > li",
    classes: {
      "ui-droppable-hover": "ui-state-highlight"
    },
    drop: function(event, ui) {
      deleteItem(ui.draggable);
    }
  });

  function deleteItem($o) {
    $o.fadeOut().remove();
  }
});

#draggable {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#draggable li {
  display: inline-block;
  margin: 1%;
  padding: 1%;
  font-size: 10vw;
  text-align: center;
  min-width: 20px;
  border-style: solid;
  border-width: medium;
  border-color: black;
  background-color: grey;
}

#sortable {
  list-style-type: none;
  width: 100%;
}

#sortable li {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: 10vw;
  text-align: center;
  min-width: 20px;
}

.trash {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  border-radius: 6px;
}

<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="drag-items" style="display: block;">
  <ul id="draggable">
    <li class="clone">+</li>
    <li class="clone">-</li>
  </ul>
</div>
<div class="problem" style="display: block;">
  <ul id="sortable">
    <li class="ui-state-disabled">1</li>
    <li class="ui-state-disabled">2</li>
    <li class="ui-state-disabled">3=6</li>
  </ul>
</div>
<div class="trash">
  <span class="ui-icon ui-icon-trash"></span>
</div>

在此代码中，为要拖动的项目添加一小部分，当它们被删除时，它们将被删除。也有视觉反馈。

拖放，可复制和可移除

2 个答案: