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)
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("
Name Country Experience Technologies 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