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

Question

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

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

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

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

Answer 1

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

Взгляните на сортируемый с подключенными списками .

Answer 2

Также проверьте это

jQuery: настраиваемый макет с использованием перетаскивания (примеры)

http://devheart.org/examples/jquery-customizable-layout-using-drag-and-drop/1-getting-started-with-sortable-lists/

Answer 3

Проверьте это: http://wil -linssen.com / entry / extending-jquery-sortable-with-ajax-mysql / Я использую это, и я доволен решением .

Прямо здесь вы можете найти демо: http://demo.wil -linssen.com / jquery-sortable-ajax /

Наслаждайтесь!

Answer 4

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

Markup-

<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
}

Проверьте поршень JQuery Drag Drop

Answer 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>

1. это просто, я добавляю html таблицу в div в конце
2. мы можем достичь этого или чего-то другого с помощью простой концепции вызова функции JavaScript, когда мы захотим (здесь, по запросу).
3. В этом примере вы можете перетаскивать любое количество таблиц, новая таблица будет добавлена ​​ниже последней таблицы, существующей в div, в противном случае это будет первая таблица в div.
4. здесь мы можем добавить текст между таблицами или мы можем сказать, что раздел, в котором мы отбрасываем таблицы, является редактируемым, мы можем печатать текст между таблицами.

Спасибо ...:)

Answer 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