Faites glisser et déposez des éléments de la liste dans des blocs distincts

J’essaie d’obtenir un composant jQuery similaire à celui de ce site .

Fondamentalement, il existe une liste d’éléments disponibles que vous pouvez faire glisser et déposer dans plusieurs blocs.

J’ai pas mal d’expérience en développement JavaScript, mais je suis assez novice en jQuery, le langage dans lequel je veux que ce soit écrit.

Pouvez-vous me donner un exemple similaire à celui présenté ci-dessus ou me donner des conseils sur ce qui pourrait être un bon endroit pour commencer à chercher quelque chose comme ça?

Peut-être que l’interface utilisateur de jQuery fait ce que vous recherchez. Il est composé de nombreuses fonctions utiles comme rendre les objects déplaçables, largables, redimensionnables, sortingables, etc.

Jetez un oeil à sortingable avec les listes connectées .

Vérifiez ceci: http://wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/ J’utilise ceci et je suis content de la solution.

Ici vous pouvez trouver une démo: http://demo.wil-linssen.com/jquery-sortable-ajax/

Prendre plaisir!

Vérifiez aussi

jQuery: Mise en page personnalisable par glisser-déposer (exemples)

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

J’ai écrit du code de test pour vérifier le glisser / déposer de JQueryUI. L’exemple montre comment faire glisser un élément d’un conteneur et le déposer dans un autre conteneur.

Markup-

Panel 1

Item 1
Item 2
Item 3
Item 4
Item 5

Panel 2

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

Vérifiez le plunker JQuery Drag Drop

  function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } function allowDrop(event) { event.preventDefault(); } function drop(event) { $("#maincontainer").append("
NameCountryExperienceTechnologies
Bhanu Pratap India 3 years Javascript,Jquery,AngularJS,ASP.NET C#, XML,HTML,CSS,Telerik,XSLT,AJAX,etc...
"); }
  .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); } 
  

Drag Table

Faire glisser un object et le placer à un autre endroit fait partie du standard HTML5. Tous les objects peuvent être déplaçables. Mais les spécifications du navigateur Web ci-dessous doivent être suivies. API Chrome Internet Explorer Firefox Safari Opera Version 4.0 9.0 3.5 6.0 12.0

Vous pouvez trouver un exemple ci-dessous: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2