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

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

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

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

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

6 60
jquery drag-and-drop

6 ответов:

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

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

77

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

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

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

9

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

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

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

8

Я написал тестовый код для проверки перетаскивания 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

4

 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, когда мы хотим (здесь на drop.)
  3. в этом примере вы можете перетащить и отбросить любое количество таблиц, новая таблица будет добавлена ниже последней таблицы, существующей в div, иначе это будет первая таблица в div.
  4. здесь мы можем добавьте текст между таблицами или мы можем сказать, что раздел, где мы отбрасываем таблицы, доступен для редактирования, мы можем вводить текст между таблицами. enter image description here

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

1

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

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

0