jquery пользовательские перетаскиваемые динамические проблемы c проблема

Question

Я хотел бы создать область перетаскивания jquery. Области отбрасывания будут создаваться динамически путем извлечения данных из возврата ajax из базы данных mysql. Я могу создать динамические области c, но при перетаскивании «продукта» через область перетаскивания он не работает. У меня также есть две жестко закодированные области, и они работают как положено. Это код:

/* jquery draggable/droppable */
$(function(){
$(".draggable").draggable({
  revert : function(event, ui){
    $(this).data("uiDraggable").originalPosition = {top : 0,left : 0};
    return !event;
  },
  containment : "#img-id",
  cancel: false
});

$('.snap-item').droppable({
  tolerance: "fit",
  accept: ".draggable",
  activeClass: "highlight",
  drop: function(event, ui){
    if(!confirm("Are you sure?")){
      ui.draggable.css({top: 0,left: 0});
      ui.helper.css({"background-color": ""});
    }else{
      console.log('dragged ' + ui.draggable.data('dragitem') + ' onto ' +    $(this).data("myval")); // dragitem
  $(this).removeClass("highlight").addClass("green");
    }
  },
  out: function (event, ui) {
    ui.helper.css({"background-color": ""});
    $(this).removeClass("green");
  }
});
});

/* HTML code */
<div class="box">
      <div id="droppable">
        <div class="snap">
          <div id="dynamic"></div>
          <div class="snap-item ui-widget-header" data-myval="Meat1" style="top:20%; left:50%;"><div class="location">Meat 1</div></div>
          <div class="snap-item ui-widget-header" data-myval="Meat2" style="top:10%; left:30%;"><div class="location">Meat 2</div></div>
          <img id="img-id" class="img-fluid test">
        </div>
      </div>
    </div>

/* jquery ajax code to get data from database */
$.ajax({
      type: "POST",
      url: "queries/getCategories.php",
      dataType: 'json',
      cache: false,
      data:{store_id:storeid},
      success: function(data){
        $.each(data,function(i,j){
        $("#dynamic").append("<div class='snap-item ui-widget-header' data-myval='myval2' style='left:" + j.left_pos + "%; top:" + j.top_pos + "%'>Testarea " + j.category_id + "</div>");
        console.log("top " + j.top_pos);

      });
      }
    });

Это скриншот с результатом:

Как видите, я могу перетащить «Свинина» в «Мясо 1» или «Мясо 2», так как они были жестко закодированы. Но я не могу перетащить его на другие, так как они были созданы динамически.

Я искал и пробовал много решений, но ни одно из них не работает, и документация jquery пользовательского интерфейса очень, очень ограничена и бедный.

Большое спасибо

Answer 1

Что ж, мне самому удалось найти ответ.

Сначала разбейте перетаскиваемый / сбрасываемый код следующим образом:

/* jquery draggable/droppable */
$(function(){
$(".draggable").draggable({
revert : function(event, ui){
    $(this).data("uiDraggable").originalPosition = {top : 0,left : 0};
    return !event;
  },
  containment : "#img-id",
  cancel: false
});
});

function makeDroppable(){
$('.snap-item').droppable({
  tolerance: "fit",
  accept: ".draggable",
  activeClass: "highlight",
  drop: function(event, ui){
    if(!confirm("Are you sure?")){
      ui.draggable.css({top: 0,left: 0});
      ui.helper.css({"background-color": ""});
    }else{
      console.log('dragged ' + ui.draggable.data('dragitem') + ' onto ' +    $(this).data("myval")); // dragitem
  $(this).removeClass("highlight").addClass("green");
    }
  },
  out: function (event, ui) {
    ui.helper.css({"background-color": ""});
    $(this).removeClass("green");
  }
});
});
}

А затем просто добавьте makeDroppable ( ) в конце вызова ajax, например:

/* jquery ajax code to get data from database */
$.ajax({
      type: "POST",
      url: "queries/getCategories.php",
      dataType: 'json',
      cache: false,
      data:{store_id:storeid},
      success: function(data){
        $.each(data,function(i,j){
        $("#dynamic").append("<div class='snap-item ui-widget-header' data-myval='myval2' style='left:" + j.left_pos + "%; top:" + j.top_pos + "%'>Testarea " + j.category_id + "</div>");
        console.log("top " + j.top_pos);
        makeDroppable(); // ADDED THIS !!
      });
      }
    });

Таким образом, вы не инициализируете действие удаления, пока все div не будут добавлены в DOM.

Надеюсь, это кому-нибудь поможет!