jQuery - Trascina elementi dalla lista in blocchi separati

Question

Sto cercando di ottenere un componente jQuery simile a questo in questo site.

Fondamentalmente, c'è una lista con elementi disponibili, che puoi trascinare in più blocchi.

ho un po 'di JavaScript esperienza di sviluppo, ma io sono abbastanza nuovo per jQuery, la lingua Voglio che questo essere script in.

può voi ragazzi vi prego di portare a qualche esempio simile a quello mostrato sopra, o darmi qualche suggerimento su quale sarebbe un buon posto per iniziare a cercare qualcosa di simile?

Answer 1

Forse jQuery UI fa quello che stai cercando. È composto da molte utili funzioni di aiuto come rendere oggetti trascinabili, trascinabili, ridimensionabili, ordinabili, ecc.

Dai uno sguardo allo sortable with connected lists.

Answer 2

Verificare che fuori: http://wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/ Sto usando questo e sono felice con la soluzione.

Proprio qui si può trovare una demo: http://demo.wil-linssen.com/jquery-sortable-ajax/

Enjoy!

Answer 3

controllare Inoltre

jQuery: il layout personalizzabili con drag and drop (esempi)

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

Answer 4

ho scritto qualche codice di prova per verificare jQueryUI drag/drop. L'esempio mostra come trascinare un elemento da un contenitore e rilasciarlo in un altro contenitore.

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 
} 

Controllare il 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. questo è solo semplice qui sto aggiungendo tabella html all'interno di un div al termine
2. possiamo raggiungere questo o qualsiasi cosa con un semplice concetto di chiamare una funzione JavaScript quando si vuole (qui a caduta.)
3. In questo esempio è possibile trascinare & rilasciare un numero qualsiasi di tabelle, verrà aggiunta una nuova tabella al di sotto dell'ultima tabella esistente nel div altrimenti opportuno sarà la prima tabella nel div.
4. qui possiamo aggiungere del testo tra le tabelle o possiamo dire che la sezione in cui trasciniamo le tabelle è modificabile possiamo digitare il testo tra le tabelle.

Grazie ... :)

Answer 6

Spostare un oggetto e l'immissione in una posizione diversa è parte dello standard di HTML5. Tutti gli oggetti possono essere trascinati. Tuttavia, è necessario seguire le specifiche del seguente browser web. API Chrome a Internet Explorer Firefox Safari Opera versione 4,0 9,0 3,5 6,0 12,0

È possibile trovare ad esempio dal basso: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2