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

Question

我正在尝试在 div 调用 "timeslot" 中删除按钮时生成新的预设按钮，我不知道该怎么做，所以我进行了函数调用 "init()" 这是删除列表中的所有按钮生成所有新的预设按钮。然而，这不是通过删除列表中的所有按钮并再次生成所有按钮来生成新按钮的好方法。以下是我的代码。

HTML

时间段sheet样式

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

html 的主要代码我还使用了 bootstrap

中的一些样式（用于按钮）

<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 时，我正在寻找一种方法来保留按钮（包括新生成的按钮）。显然，初始函数不是一个好的方法，因为存在一些逻辑错误（当另一个按钮被放下时，新的生成按钮消失）。谁能帮我弄清楚？

一些小的编辑，所以我想要的是当拖放相同的按钮时列表自动生成相同的按钮。例如，当 "Eat" 按钮被拖放到时间段框中时，列表会自动在列表中生成一个新的 "Eat" 按钮，因此我可以在时间段中添加另一个 "Eat" 按钮框而不在输入中输入 Eat 以生成 "Eat" 按钮。

Answer 1

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

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

如果 HTML 上已有“启动默认按钮”，则根本不需要 init() 功能。

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

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

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

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

额外

要从复制的按钮中删除克隆功能，您可以将“复制”class 添加到按钮副本并在 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");
    }
});

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

How can I keep the buttons when the button is dragged or dropped jQuery ui

html

javascript

jquery

jquery-ui

bootstrap-4

额外