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中时保留按钮（包括新的生成按钮）的方法。显然，初始功能不是实现此目的的好方法，因为存在一些逻辑错误（当另一个按钮被放下时，新的生成按钮会消失）。有人可以帮我弄清楚吗？

一些小的编辑，所以我想要的是当拖动或放下同一按钮时列表自动生成相同的按钮。例如，当将“ Eat”按钮拖放到时隙框中时，列表会自动在列表中生成一个新的“ Eat”按钮，因此我可以在时隙框中添加另一个“ Eat”按钮，而无需在输入以生成“饮食”按钮。

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

0 个答案: