Как сохранить кнопки при перетаскивании или отпускании кнопки 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. Очевидно, начальная функция не является хорошим способом сделать это, потому что есть некоторые логические ошибки (новые кнопки генерации исчезают, когда другая кнопка отбрасывается). Может кто-нибудь помочь мне разобраться?

Небольшое редактирование, поэтому я хочу, чтобы список автоматически генерировал те же кнопки, когда та же кнопка перетаскивалась или опускалась. Например, когда кнопка «Eat» перетаскивается или опускается в поле временного интервала, список автоматически генерирует новую кнопку «Eat» в списке, поэтому я могу добавить еще одну кнопку «Eat» в поле временного интервала, не вводя «Eat» в поле «Eat». вход для создания кнопки «Ешьте».

Answer 1

Я сделал для вас простой пример:

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

Вам не нужна ваша функция init(), если у вас есть «кнопки запуска по умолчанию» наHTML уже.

Другое изменение состояло в том, чтобы установить параметр revert: true для перетаскиваемого объекта и, при добавлении, создать копию, используя $.clone().Это означает, что каждая кнопка всегда будет возвращаться в исходное положение, но, если кнопка будет отпущена в «области перетаскивания», она создаст клон, прежде чем вернется в исходное положение.

Я использовалклонировать, чтобы применить CSS и другие вещи, которые у вас были, поэтому вы изменили только клонированный объект.

Кроме того, в качестве лучшей практики я изменил ваш <div class="list"> на <div class="id">.Поскольку вы используете ссылку на этот div в jQuery для добавления новых кнопок, лучше использовать ID вместо class (уникальная ссылка).

PS:Поскольку вы нигде не сохраняете свой список, при перезагрузке страницы вы потеряете все пользовательские кнопки (добавленные с помощью поля ввода).

---

EXTRA

Чтобы удалить функцию клонирования из скопированногокнопку, вы можете добавить «copy» класс к кнопке copy и проверить это в функции 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");
    }
});