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

Question

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

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

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

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

Answer 1

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

Посмотрите на sortable with connected lists.

Answer 2

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

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

Enjoy!

Answer 3

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

JQuery: Настраиваемый макет с помощью перетаскивания (примеры)

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

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

$(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

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