jQuery ui 拖放按钮时如何保留按钮

Question

当按钮被放到 div 调用“timeslot”中时，我试图生成新的预设按钮，我不知道该怎么做，所以我做了一个函数调用“init()”，它删除了所有按钮在列表中生成所有新的预设按钮。但是，这不是通过删除列表中的所有按钮并再次生成所有按钮来生成新按钮的好方法。以下是我的代码。

HTML

时间段的样式表

<style type="text/css">
.timeSlot{
width: 100%;
height: 3rem;
border: 1px solid rgb(131, 100, 100);
}
</style>

html 的主要代码我还使用了引导程序中的一些样式（用于按钮）

<div class="timeSlot">
</div>
<div class="timeSlot">
</div>
<div class="timeSlot">
</div>

<div class="list">    
<input type="text" placeholder="Add New Events">
<div class="preset"><button class="add btn btn-primary"><span><i class="fa fa-trash"></i></span>Eat</button></div>
<div class="preset"><button class="add btn btn-success"><span><i class="fa fa-trash"></i></span>Workout</button></div>
<div class="preset"><button class="add btn btn-warning"><span><i class="fa fa-trash"></i></span>Sleep</button></div>
<div class="preset"><button class="add btn btn-info"><span><i class="fa fa-trash"></i></span>Laundry</button></div>
<div class="preset"><button class="add btn btn-dark"><span><i class="fa fa-trash"></i></span>Study</button></div>
</div>      

Javascript

$("button").draggable({cancel:false ,cursor: "crosshair", revert: "invalid"});

输入框通过输入文字生成新按钮

$("input[type='text']").keypress(function(event){
if (event.which === 13) {
    var todoText = $(this).val();
    $(this).val("");
    $(".list").append("<div class=\"preset\"><button class=\"add btn btn-secondary\"><span><i class=\"fa fa-trash\"></i></span> " + todoText + "</button></div>");
  $("button").draggable({cancel:false ,cursor: "crosshair", revert: "invalid"});
  }
  });

初始函数

function init(){
$(".list").find(".preset").remove();
$(".list").append("<div class=\"preset\"><button class=\"add btn btn-primary\"><span><i class=\"fa fa-trash\"></i></span>Eat</button></div><div class=\"preset\"><button class=\"add btn btn-success\"><span><i class=\"fa fa-trash\"></i></span>Workout</button></div><div class=\"preset\"><button class=\"add btn btn-warning\"><span><i class=\"fa fa-trash\"></i></span>Sleep</button></div><div class=\"preset\"><button class=\"add btn btn-info\"><span><i class=\"fa fa-trash\"></i></span>Laundry</button></div><div class=\"preset\"><button class=\"add btn btn-dark\"><span><i class=\"fa fa-trash\"></i></span>Study</button></div>");
$("button").draggable({cancel:false ,cursor: "crosshair", revert: "invalid"});} 

拖放功能

$(".timeSlot").droppable({ accept: ".add", 
drop: function(event, ui) {
console.log("drop");
               $(this).removeClass("border").removeClass("over");
         var dropped = ui.draggable;
        var droppedOn = $(this);
        $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);      
         init(); 

            }, 
      over: function(event, elem) {
              $(this).addClass("over");
               console.log("over");
      }
            ,
              out: function(event, elem) {
                $(this).removeClass("over");

              }
                 });

所以问题是当我使用输入生成一些新按钮时，如果我使用任何按钮放下，其余的新生成按钮就会消失。当按钮被拖动到列表中或放入 div 时，我正在寻找一种方法来保留按钮（包括新的生成按钮）。显然，初始功能不是一个好方法，因为存在一些逻辑错误（当另一个按钮被放下时，新的生成按钮会消失）。谁能帮我弄清楚？

一些小的编辑，所以我想要的是列表在拖放相同的按钮时自动生成相同的按钮。例如，当在时间段框中拖放“吃”按钮时，列表会自动在列表中生成一个新的“吃”按钮，这样我就可以在时间段框中添加另一个“吃”按钮，而无需在输入以生成“吃”按钮。

Answer 1

我在这里为你做了一个简单的例子：

https://codepen.io/brunomont/pen/moqjaj

如果您在 HTML 上已经有了“启动默认按钮”，则根本不需要您的 init() 函数。

另一个变化是为 draggable 对象设置选项revert: true，并在放置时使用$.clone() 创建一个副本。这意味着每个按钮都将始终返回到其原始位置，但是，如果按钮被放置在“放置区域”中，它将在返回到原始位置之前创建一个克隆。

我使用克隆来应用你拥有的 CSS 和其他东西，所以你只修改了克隆的对象。

另外，作为最佳实践，我将您的 <div class="list"> 更改为 <div class="id">。由于您在 jQuery 上使用对该 div 的引用来添加新按钮，因此最好使用 ID 而不是 class（唯一引用）。

PS：由于您没有将列表保存在任何地方，因此您将在页面重新加载时丢失任何自定义按钮（使用输入框添加）。

---

额外

要从复制的按钮中删除克隆功能，您可以将“复制”类添加到按钮副本并在 drop 函数中检查，如下所示：

$(".timeSlot").droppable({ accept: ".add",
    drop: function(event, ui) {
        if ($(ui.draggable).hasClass('copy')){
            $(this).removeClass("border").removeClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).css({top: 0,left: 0}).appendTo(droppedOn);
        } else {
            $(this).removeClass("border").removeClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);
            var newBtn = $(dropped).clone();
            $(dropped).draggable("option", "revertDuration", 0);
            $(newBtn).addClass('copy');
            $(newBtn).css({top: 0,left: 0}).appendTo(droppedOn);
            setTimeout(function(){
                $(dropped).draggable("option", "revertDuration", 500);
            }, 100);
            $("button").draggable({cancel:false ,cursor: "crosshair", revert: true});
        }
    }, 
    over: function(event, elem) {
        $(this).addClass("over");
        console.log("over");
    },
    out: function(event, elem) {
        $(this).removeClass("over");
    }
});