jQuery - Faites glisser et déposer des éléments de la liste dans des blocs distincts

Question

J'essaie d'obtenir un composant jQuery similaire à celui-ci dans ce site.

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

J'ai un peu de JavaScript expérience de développement, mais je suis tout à fait nouveau pour jQuery, la langue que je veux que ce soit scénarisé dans.

Pouvez-vous les gars s'il vous plaît me conduire à quelque exemple similaire à celui montré ci-dessus, ou me donner quelques indices sur ce qui serait un bon endroit pour commencer à chercher quelque chose comme ça?

Answer 1

Peut-être que l'interface utilisateur de jQuery répondra à vos attentes. Il est composé de nombreuses fonctions auxiliaires pratiques telles que la création d'objets pouvant être déplacés, déposés, redimensionnables, triés, etc.

Regardez sortable with connected lists.

Answer 2

Check out out: 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/

Enjoy!

Answer 3

Vérifiez également qu'il

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/

Answer 4

j'ai écrit un code de test pour vérifier glisser/déposer jQueryUI. L'exemple montre comment faire glisser un élément d'un conteneur et le déposer dans un autre conteneur.

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 
} 

Vérifiez la 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. c'est tout simple ici, je suis annexant table html dans un div à la fin
2. nous pouvons y parvenir ou quelque chose avec un concept simple d'appeler une fonction JavaScript lorsque l'on veut (ici sur la baisse.)
3. Dans cet exemple, vous pouvez faire glisser & déposer un certain nombre de tables, une nouvelle table sera ajoutée ci-dessous la dernière table existe dans la div autrement, il sera la première table dans la div.
4. Ici, nous pouvons ajouter du texte entre les tables ou nous pouvons dire que la section où nous supprimons les tables est modifiable, nous pouvons taper du texte entre les tables.

Merci ... :)

Answer 6

Faire glisser un objet et placer dans un autre endroit fait partie de la norme HTML5. Tous les objets peuvent être déplacés. 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 trouverez par exemple ci-dessous: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2