web-dev-qa-db-fra.com

Glissez et déposez les éléments de la liste dans des blocs séparés

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

En gros, il existe une liste des éléments disponibles que vous pouvez glisser-déposer dans plusieurs blocs.

J'ai pas mal d'expérience en développement JavaScript, mais jQuery, le langage dans lequel je veux que cela soit écrit, est une nouveauté.

Pouvez-vous m'indiquer un exemple similaire à celui présenté ci-dessus ou me donner des indices sur ce qui serait un bon endroit pour commencer à chercher quelque chose comme cela?

jquerydrag-and-drop
63
titel

Peut-être que jQuery UI fait ce que vous recherchez. Il est composé de nombreuses fonctions d’aide utiles telles que rendre des objets glissables, largables, redimensionnables, triables, etc.

Jetez un oeil à triable avec des listes connectées .

78
Thorbjørn Hermansen

Regardez 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!

8
Marcio Mangar

Également vérifier

jQuery: présentation personnalisable par glisser-déposer (exemples)

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

8
PHP Ferrari

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-

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

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 plongeur JQuery Drag Drop

7
Newton Sarker
 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. cela est juste simple ici, je vais ajouter la table HTML dans un div à la fin
  2. nous pouvons réaliser cela ou n'importe quoi avec un simple concept consistant à appeler une fonction JavaScript quand nous le souhaitons (ici, en bas de page.)
  3. Dans cet exemple, vous pouvez glisser-déposer un nombre quelconque de tables, une nouvelle table sera ajoutée en dessous de la dernière table existant dans la div. Sinon, ce sera la première table de la div.
  4. ici, nous pouvons ajouter du texte entre les tableaux ou nous pouvons dire que la section où nous supprimons des tableaux est modifiable, nous pouvons taper du texte entre les tableaux. enter image description here

Merci... :)

2
Bhanu Pratap

Faire glisser un objet et le placer à un autre emplacement 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 pouvez trouver un exemple ci-dessous: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

1
Debojyoti Mahapatra