Ziehen Sie Elemente aus der Liste in separate Blöcke und legen Sie sie dort ab

Ich versuche, eine ähnliche jQuery-Komponente wie die zu erhalten Diese Seite.

Grundsätzlich gibt es eine Liste mit verfügbaren Elementen, die Sie per Drag & Drop in mehrere Blöcke ziehen können.

Ich habe ziemlich viel Erfahrung in der JavaScript-Entwicklung, aber ich bin ziemlich neu in jQuery, der Sprache, in der dies geskriptet werden soll.

Können Sie mich bitte zu einem ähnlichen Beispiel wie dem oben gezeigten führen oder mir einige Hinweise geben, wo ein guter Ort wäre, um mit der Suche nach so etwas zu beginnen?

Vielleicht tut jQuery UI das, wonach Sie suchen. Es besteht aus vielen praktischen Hilfsfunktionen wie das Ziehen, Ablegen, Ändern der Größe, Sortieren von Objekten usw.

Schauen Sie sich an sortierbar mit verbundenen Listen.

Ich habe einen Testcode geschrieben, um JQueryUI Drag/Drop zu überprüfen. Das Beispiel zeigt, wie Sie ein Element aus einem Container ziehen und in einem anderen Container ablegen.

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
}

Überprüfen Sie den Plunker JQuery-Drag-Drop

Sieh dir das an: http://wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/ Ich benutze das und bin mit der Lösung zufrieden.

Hier finden Sie eine Demo: http://demo.wil-linssen.com/jquery-sortable-ajax/

Genießen!

Überprüfen Sie es auch

jQuery: Anpassbares Layout per Drag and Drop (Beispiele)

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

 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. Das ist einfach hier, ich hänge eine HTML-Tabelle an ein div am Ende an
2. Wir können dies oder irgendetwas mit einem einfachen Konzept erreichen, eine JavaScript-Funktion aufzurufen, wann immer wir wollen (hier auf drop.)
3. In diesem Beispiel können Sie eine beliebige Anzahl von Tabellen ziehen und ablegen. Eine neue Tabelle wird unter der letzten Tabelle hinzugefügt, die im Div vorhanden ist. Andernfalls ist sie die erste Tabelle im Div.
4. Hier können wir Text zwischen Tabellen hinzufügen oder wir können sagen, dass der Abschnitt, in dem wir Tabellen löschen, bearbeitbar ist. Wir können Text zwischen Tabellen eingeben.
   

Vielen Dank… 🙂

Das Ziehen eines Objekts und das Platzieren an einer anderen Stelle ist Teil des HTML5-Standards. Alle Objekte können ziehbar sein. Aber die Spezifikationen des untenstehenden Webbrowsers sollten befolgt werden. API Chrome Internet Explorer Firefox Safari Opera Version 4.0 9.0 3.5 6.0 12.0

Sie können ein Beispiel von unten finden:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2