JQuery - перетаскивание элементов из списка в отдельные блоки

Я пытаюсь получить компонент jQuery, похожий на этот, на этом сайт.

В принципе, есть список доступных элементов, который можно перетащить в несколько блоков.

У меня довольно много опыта разработки JavaScript, но я совершенно не знаком с jQuery, языком, на котором я хочу, чтобы это было написано.

Можете ли вы, ребята, привести меня к примеру, подобному приведенному выше, или дать мне несколько намеков на то, что было бы хорошим местом, чтобы начать искать что-то вроде этого?

Ответы

Ответ 1

Возможно, пользовательский интерфейс jQuery делает то, что вы ищете. Он состоит из множества удобных вспомогательных функций, таких как создание объектов, перетаскиваемых, отбрасываемых, изменяемых по размеру, сортируемых и т.д.

Посмотрите сортировку со связанными списками.

Ответ 4

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

Разметка -

<div class="row">
    <div class="col-xs-3">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h1 class="panel-title">Panel 1</h1>
        </div>
        <div id="container1" class="panel-body box-container">
          <div itemid="itm-1" class="btn btn-default box-item">Item 1</div>
          <div itemid="itm-2" class="btn btn-default box-item">Item 2</div>
          <div itemid="itm-3" class="btn btn-default box-item">Item 3</div>
          <div itemid="itm-4" class="btn btn-default box-item">Item 4</div>
          <div itemid="itm-5" class="btn btn-default box-item">Item 5</div>
        </div>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h1 class="panel-title">Panel 2</h1>
        </div>
        <div id="container2" class="panel-body box-container"></div>
      </div>
    </div>
  </div>

Коды JQuery -

$(document).ready(function() {

$('.box-item').draggable({
    cursor: 'move',
    helper: "clone"
});

$("#container1").droppable({
  drop: function(event, ui) {
    var itemid = $(event.originalEvent.toElement).attr("itemid");
    $('.box-item').each(function() {
      if ($(this).attr("itemid") === itemid) {
        $(this).appendTo("#container1");
      }
    });
  }
});

$("#container2").droppable({
  drop: function(event, ui) {
    var itemid = $(event.originalEvent.toElement).attr("itemid");
    $('.box-item').each(function() {
      if ($(this).attr("itemid") === itemid) {
        $(this).appendTo("#container2");
      }
    });
  }
});

});

CSS -

.box-container {
    height: 200px;
}

.box-item {
    width: 100%;
    z-index: 1000
}

Проверьте plunker JQuery Drag Drop

Ответ 5

 function dragStart(event) {
            event.dataTransfer.setData("Text", event.target.id);
        }

        function allowDrop(event) {
            event.preventDefault();
        }

        function drop(event) {
            $("#maincontainer").append("<br/><table style='border:1px solid black; font-size:20px;'><tr><th>Name</th><th>Country</th><th>Experience</th><th>Technologies</th></tr><tr><td>  Bhanu Pratap   </td><td> India </td><td>  3 years   </td><td>  Javascript,Jquery,AngularJS,ASP.NET C#, XML,HTML,CSS,Telerik,XSLT,AJAX,etc...</td></tr></table>");
        }
 .droptarget {
            float: left;
            min-height: 100px;
            min-width: 200px;
            border: 1px solid black;
            margin: 15px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }

        [contentEditable=true]:empty:not(:focus):before {
            content: attr(data-text);
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
        <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag Table</p>
    </div>

    <div id="maincontainer" contenteditable=true data-text="Drop here..." class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Ответ 6

Перетаскивание объекта и размещение в другом месте является частью стандарта HTML5. Все объекты можно перетаскивать. Но должны следовать спецификации ниже веб-браузера. API Chrome Internet Explorer Firefox Safari Opera Версия 4.0 9.0 3.5 6.0 12.0

Ниже вы можете найти пример: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2