Welcome Guest. Sign in or Signup

6 Comments

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

Asked by: 5375 views e) Advanced

+3
0

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 .

6 Comments



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



  2. 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/&quot; 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?



  3. Sunny Kumar on Jul 22, 2013 Reply

    Thanks for sharing, helped a lot. Keep up the good work (Cheers)



  4. Rachel on Jun 01, 2014 Reply

    snap: ‘#droppable’ – what ‘#droppable’ refers to?


Sponsored By:

Comments on Question