Блог

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

Здесь Div-1 ,Div-2 и столбец являются перетаскиваемым элементом.Их можно сбросить в div(Сбросьте здесь).Я бросил колонку в div(Бросьте здесь).Затем я хотел добавить еще один div в колонку .Но они не могли упасть там.

Вот HTML-код..

 <div id="draggable1" class="div">
  <p>Div-1</p>
</div>
<div id="draggable2" class="div">
  <p>Div-2</p>
</div>
<div id="column" class="div">Column</div>

<div id="droppable">
  <p>Drop here</p>
</div>
 

И часть jquery…

 $(function () {
    $("#draggable1").draggable({
      helper: "clone",
    });
    $("#draggable2").draggable({
      helper: "clone",
    });
    $("#column").draggable({
      helper: "clone",
    });
    $("#column").droppable({
      drop: function (event, ui) {
        $("#droppable").droppable("disable");
        var columnItem = $(ui.draggable).clone();
        console.log(columnItem);
        $(this).append(columnItem);
      },
    });
    $("#droppable").droppable({
      drop: function (event, ui) {
        var droppedItem = $(ui.draggable).clone();
        console.log(droppedItem);
        $(this).append(droppedItem);
      },
    });
  });
 

Я думаю, что лучший способ-использовать жадный вариант droppable. Не забудьте пройти через API, если вы обнаружите какие-либо проблемы.

http://api.jqueryui.com/droppable/#option-greedy

Вот как выглядит ваш код с опцией жадности:

 $(".child").droppable({ 
    accept: '.item',
    greedy: true,
    drop: function(e, ui){ 
     alert("drop on child");
    }
});
 

Вот ты где… !!!