CODEWITHSUNDEEP
javascriptjquerydrag-and-dropdrag
Manudog
Manudog

Reputation: 161

Drag and drop with the help of jQuery

I'd like to be able to move an object into another with the function draggable of jQuery. I can move an object in the container and able to move in it. But when I try to add helper to objects to move, this no longer works. I want that when I select an item to deposit it in my container, it duplicates itself. Below is what I have managed to do for the moment:

JSFiddle

$(".drag").draggable({
    opacity: 0.7,
    snap: '#drop',
    cursor: "move",
    revert: "invalid",
    //helper: "clone"
});

$("#drop").droppable({
    drop: function(event, ui) {

    }
});

<div class="drag">
    <p>Exemple bloc</p>
</div>
<div class="drag">
    <p>Exemple bloc</p>
</div>


<div id="drop">
   <p>Drop here</p>
</div>

The element I deposited in .drop clone and must be able to move in the container .drop

Upvotes: 1

Views: 1250

Answers (3)

ElChiniNet
ElChiniNet

Reputation: 2902

You need to apply the draggable function to the item after it is cloned and add a class to it. After if the item is returned to the initial position you delete it:

HTML Code

<div id="container">
  <div class="drag">
    <p>Exemple bloc 1</p>
  </div>
  <div class="drag">
    <p>Exemple bloc 2</p>
  </div>
</div>

<div id="drop">
  <p>Drop here</p>
</div>

CSS Code

#container{
  width: 100%;
}
.drag {
  height: 50px;
  width: 50px;
  background: #505050;
  color: #FFFFFF;
  padding: 10px;
  display: inline-block;
  margin: 0 10px 10px 10px;
}

#drop {
  width: 100%;
  height: 600px;
  background: #FFFFFF;
  border: 1px solid #999999;
}

jQuery code

makeDragable($(".drag"));

$("#drop").droppable({
  accept: ".drag",
  drop: function(event, ui) {

    if( $(ui.draggable).hasClass("cloned") ) {        
       $(ui.draggable).css(ui.offset).css("position", "absolute");      
       return;    
    }

    var item = $(ui.draggable).clone();
    item.addClass("cloned");
    $(this).append(item);
    makeDragable(item);
  }
});

$("#container").droppable({
  accept: ".cloned",
  drop: function(event, ui) {
    $(ui.draggable).detach();
  }
});

function makeDragable(item) {
  item.draggable({
    opacity: 0.7,
    cursor: "move",
    helper: "clone"
  });
}

jsfiddle

Upvotes: 0

Georgi Naumov
Georgi Naumov

Reputation: 4211

I have edited your fiddle: http://jsfiddle.net/3tjbhjtq/54/ Here is the code: 

$(".drag").draggable({

  opacity  : 0.7,
  snap     : '#drop',
  cursor   : "move",
  revert   : "invalid",
  helper   : "clone"

});

$("#drop").droppable({

  drop: function(event, ui) {

    var currenOffset = ui.offset;

    var dropedObjectCss = {
      "position" : "absolute",
      "left"     : currenOffset.left,
      "top"      : currenOffset.top
    };

    var tag = ui.draggable;

    if (tag.data('alreadydropped')) {
      var newItem = tag.css(dropedObjectCss).appendTo( this ); 

      newItem.draggable({
        opacity : 0.7,
        snap    : '#drop',
        cursor  : "move",
        revert  : "invalid"
      });

    } else {
      var newItem = tag.clone().css(dropedObjectCss).appendTo( this );

      newItem.data('alreadydropped', true).draggable({
        opacity : 0.7,
        snap    : '#drop',
        cursor  : "move",
        revert  : "invalid"
      });

    }
  }
});

Is this result that you want?

The idea is that we should have different behavior when the item is dropped for the first time and when is moved in the container. This is the reason that we keep alreadydropped in data. So the first time (else block) we clone the object and append to the container and set alreadydropped to true. After this every time when user move the item we will enter into if condition and the item will not be cloned and only moved into contaner.

Upvotes: 1

aitnasser
aitnasser

Reputation: 1256

this a working demo that can help you

HTML 

<div id="wrapper">
    <div id="origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
        <img src="http://placehold.it/150x100" id="two" title="two" class="draggable" />
        <img src="http://placehold.it/160x100" id="three" title="three" />
    </div>
    <p>CONTAINAIR</p>
    <div id="drop" class="fbox">

    </div>
</div>

JAVASCRIPT

    $(".draggable").draggable({ cursor: "crosshair", revert: "invalid"});

$("#drop").droppable({ accept: ".draggable",

  drop: function(event, ui) {

    console.log("drop");

    $(this).removeClass("border").removeClass("over");

    var dropped = ui.draggable;
    var droppedOn = $(this);

    $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
  },

  over: function(event, elem) {

    $(this).addClass("over");

    console.log("over");

  },

  out: function(event, elem) {

    $(this).removeClass("over");

  }

});

$("#drop").sortable();

$("#origin").droppable({ accept: ".draggable", drop: function(event, ui) {

  console.log("drop");

  $(this).removeClass("border").removeClass("over");

  var dropped = ui.draggable;
  var droppedOn = $(this);

  $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);

}});

CSS 

#origin
{
  background-color: lightgreen;
}

#origin img, #drop img {
  margin-top: 3px;
  margin-left: 5px;
}

#drop
{
  background-color: red;
  min-height: 120px;
}
.over {
  border: solid 5px purple;
}
.draggable
{
  border: solid 2px gray;
}

Upvotes: 2

Related Questions