jQuery - Przeciągnij i upuść elementy z listy na oddzielne bloki.

Question

Próbuję uzyskać komponent jQuery podobny do tego w tym site.

Zasadniczo istnieje lista dostępnych elementów, które można przeciągnąć i upuścić na kilka bloków.

mam sporo JavaScript doświadczenia rozwoju, ale jestem zupełnie nowy w jQuery język Chcę, aby było to w scenariuszu.

Możesz Chłopaki proszę prowadzić mnie do jakiegoś przykład podobny do tego pokazane powyżej, lub dać mi wskazówki, co byłoby dobrym miejscem, aby zacząć szukać czegoś takiego?

Answer 1

Może jQuery UI robi to, czego szukasz. Składa się z wielu przydatnych funkcji pomocniczych, takich jak tworzenie obiektów, które można przeciągać, zrzucać, zmieniać rozmiar, sortować itd.

Spójrz na sortable with connected lists.

Answer 2

Sprawdź to: http://wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/ Używam tego i jestem zadowolony z rozwiązania.

Tutaj można znaleźć demo: http://demo.wil-linssen.com/jquery-sortable-ajax/

Enjoy!

Answer 3

również sprawdzić go

jQuery: układ Customizable poprzez upuszczenie (przykłady)

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

Answer 4

pisałem jakiś kod testowy, by sprawdzić jQueryUI drag/drop. Przykład pokazuje, jak przeciągnąć element z kontenera i upuścić go do innego kontenera.

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 
} 

Sprawdź 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. to tylko prosty tutaj jestem dołączenie tabeli html do div na końcu
2. możemy osiągnąć ten albo niczego z prostego pojęcia wywołanie funkcji JavaScript, gdy chcemy (tutaj na dole.)
3. W tym przykładzie możesz przeciągnąć & upuścić dowolną liczbę tabel, nowa tabela zostanie dodana pod ostatnią tabelą istnieje w div, w przeciwnym razie będzie to pierwsza tabela w div.
4. tutaj możemy dodać tekst między tabelami lub możemy powiedzieć, że sekcja gdzie upuszczamy tabele jest edytowalna możemy wpisać tekst pomiędzy tabelami.

Dzięki ... :)

Answer 6

Przeciąganie obiektu i umieszczenie w innej lokalizacji jest częścią standardu HTML5. Wszystkie obiekty można przeciągać. Należy jednak przestrzegać specyfikacji podaną poniżej. API Chrome Internet Explorer Firefox Safari Opera Wersja 4,0 9,0 3,5 6,0 12,0

można znaleźć przykład od dołu: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2