3 Comments

How to drag and drop and replace the position like swapping?

Asked by: SiteManager 1099 views e) Advanced

This sample will illustrate How to drag and drop and replace the position like swapping two elements.
For example:

using 10 div at display: 1 , 2 , 3, 4 , 5 …10. and when we drag a div 1, to div 7, and drop it, it will make the replacement between 1 and 7.

after that it will have a series like this: 7 , 2 , 3 , 4 , 5 , 6 , 1, 8, 9, 10 .

sportskevesti on Dec 06, 2012 Reply

Greate thanks for this link
and next step will be. How to use that code with mysql ?

(This code is very useful for changing players (substigution) in football mnager)
i make football manager web aplication for my web page
Aleksandar Popovic on Dec 07, 2012 Reply

what i do wrong?

.dragdiv
{
width:100px;
height:100px;
text-align:center;
border:1px solid gray;
margin-left:2px;
margin-top:2px;
float:left;
}

Source for this<a target="_blank"href="http://jqfaq.com/how-to-drag-and-drop-replace-the-position/" JQFaq Question

$(document).ready(function() {
for (var i = 1; i < 11; i++) {
var $newDiv = $("” + i + “”);
makeElementAsDragAndDrop($newDiv);
$(“#dragItems”).append($newDiv);
}

function makeElementAsDragAndDrop(elem) {
$(elem).draggable({
snap: ‘#droppable’,
snapMode: ‘outer’,
revert: “invalid”,
cursor: “move”,
helper: “clone”
});
$(elem).droppable({
drop: function(event, ui) {
var $dragElem = $(ui.draggable).clone().replaceAll(this);
$(this).replaceAll(ui.draggable);
makeElementAsDragAndDrop(this);
makeElementAsDragAndDrop($dragElem);
}
});
}
});
- Raja on Dec 12, 2012 Reply
  
  What are you trying to do at this line?
  var $newDiv = $(“” + i + “”);
  Are you querying the element based on class/id name?