Question

我正在尝试创建一个脚本（请参阅代码段）还原 element1，当element2 时。
/> 我使用 jQuery drag和drop函数。

现在有一个Reset按钮，可以重置所有元素。但是，我不喜欢这样 我不想重置所有元素。
相反，当element1 时，我希望element2 还原（反之亦然）。

以下是我希望恢复功能如何工作的图像（下面的项目符号描述了箭头）：

箭头1 element1 在放置区中拖放。

箭头2 element2正在拖动。

箭头3 element1

你能帮帮我吗？

代码段：

＆＃13;
＆＃13;
element2
＆＃13;
$("#element1, #element2").draggable({ revert: "invalid", scroll: false }); $("#drop").droppable({ drop: handleDropEvent, accept: "#element1, #element2" }); function handleDropEvent( event, ui ) { var draggable = ui.draggable; ui.draggable.position({ of:$(this), my:'center', at:'center' }); } $("#Reset").click(function() { $("#element1, #element2").animate({ "left": $("#element1, #element2").data("left"), "top": $("#element1, #element2").data("top") }); }); $("#element1, #element2").data("left", $("#element1, #element2").position().left).data("top", $("#element1, #element2").position().top);
＆＃13;
#element1{ width: 50px; height: 50px; background-color: black; } #element2{ width: 50px; height: 50px; background-color: red; } #drop { width: 50px; height: 50px; margin: 20px 0 0 200px; background-color: green; }
＆＃13;
＆＃13;
＆＃13; jsfiddle：https://jsfiddle.net/jwrno71z/1/

Answer 1

基本上，以下代码（在drop:处理程序中）可以解决这个问题：

$(".drop").droppable({
  accept: /*other code*/
  drop: function(event, ui) {
    if ($(this).data("draggable")) {revertDraggables($(this).data("draggable"));}
    $(this).data("draggable", "."+ui.draggable[0].className.substring(0,ui.draggable[0].className.indexOf("ui-")-1).replace(/ /g,".")); //store the draggable's classes as selector (first remove the standard ui-classes)
    ui.draggable.position({of:this, my:"center", at:"center"});
  }
}).data("draggable","");

首先，它检查 droppable 上是否已存在（先前存储的）可拖动。如果是这样，它会将 draggable 恢复到其起始位置。
然后，它将当前可拖动存储在可放置的 data属性"draggable"中。
我将解释该行的作用：
- ui.draggable[0].className获取当前 draggable 的所有类名的字符串。
- draggable 的完整className是：
  "drop1 drag one ui-draggable ui-draggable-handle ui-draggable-dragging"。
  只有前三个类是您自己的自定义类，其他类由 jQuery UI 自动添加/删除。
- .substring(0,className.indexOf("ui-")-1)从className-string中的第一个字符开始substring到"ui-"的{{3}}，-1同时删除空它前面的空间（＆＃34; ui - ＆＃34;正如你所看到的，是所有ui类的前缀）。
  结果："drop1 drag one"
- .replace(/ /g,".")用点替换所有空格（使用first occurrence），因此className-string可以用作jQuery-selector。该行开头的"."+也会在字符串的最开头加一个点结果：".drop1.drag.one"
最后，它将当前 draggable 放在 droppable （您自己的代码）上。
（最后的.data("draggable","")只是设置data属性。它与撰写$(".drop").data("draggable","");相同，但现在它除外.droppable() { {3}}直接在function revertDraggables(selector) { $(selector).animate({"left":$(selector).data("left"), "top":$(selector).data("top")}); } $(".drag").draggable({ revert: "invalid", scroll: false }).data("left",$(".drag").position().left).data("top",$(".drag").position().top); //set draggables' position-data-attribute $(".drop").droppable({ accept: function(draggable) {return draggable.hasClass(this.className.split(" ")[0]);}, //accept draggable if it has the same class as this droppable's first class drop: function(event, ui) { if ($(this).data("draggable")) {revertDraggables($(this).data("draggable"));} //revert previously dropped draggable $(this).data("draggable", "."+ui.draggable[0].className.substring(0,ui.draggable[0].className.indexOf("ui-")-1).replace(/ /g,".")); //store the draggable's classes as selector (first remove the standard ui-classes) ui.draggable.position({of:this, my:"center", at:"center"}); //position draggable on droppable } }).data("draggable",""); $(".reset").click(function() { var group = this.className.split(" ")[0]; //store the group-identifying classname revertDraggables(".drag."+group); //revert all draggables (belonging to this reset-button) $(".drop."+group).data("draggable",""); //clear the droppable's draggable-data-attribute });。）

但我也改变了其他一些事情，请查看代码段：

＆＃13;

.container {
  display: inline-block;
  position: relative;
  margin: 0 20px;
}

.drag {width:50px; height:50px; z-index:1;}
.drag.one {background-color:black;}
.drag.two {background-color:red;}

.drop {
  width: 60px;
  height: 60px;
  margin: 20px 0 0 0;
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="container">
  <div class="drop1 drag one"></div>
  <div class="drop1 drag two"></div>
  <div class="drop1 drop">Drop here</div>
  <button type="button" class="drop1 reset" name="button">Reset</button>
</div>

<div class="container">
  <div class="drop2 drag one"></div>
  <div class="drop2 drag two"></div>
  <div class="drop2 drop">Drop here</div>
  <button type="button" class="drop2 reset" name="button">Reset</button>
</div>

＆＃13;

id="element1"

＆＃13;

＆＃13; jsfiddle：regular expression

我将ID选择器（$("#element1")和class="drag one"）更改为类选择器（$(".drag")和drop1）。这使您的代码更加灵活，因为现在您不必在JS代码中添加每个可拖动元素。可放置元素也是如此 我还将CSS更改为类，使其更加灵活。
我提供了所有 draggables ， droppables 和重置按钮共享课程（drop2，<div class="container">等。），因此您可以在一个页面上拥有多个拖放系统，而无需更新您的JS 您只需复制/粘贴drop1并将this.className.split(" ")[0]类更改为下一个免费号码。
"drop1 drop"获取className-string（例如[0]）并在其中创建一个数组，chained为空空间的值。然后，它接受该数组中的第一个值（在索引"drop1"处），所以<div class="container">。
position:relative;元素需要在CSS中使用z-index:1;，以便 draggables 的定位能够正常工作。
我在CSS中提供了 draggables {{1}}，否则第一个droppable 的 draggables 将在下消失第二次放弃。

如何在拖放div2时恢复div1？

1 个答案: