Drag and drop events in Jquery UI

Question

I am learning jQuery draggable and droppable UI in that I am facing problem of handling events,

here is the my code

CSS:

#draggable 
{
   width: 100px;
   height: 100px;
   background: blue;
}
#droppable 
{
    position: absolute;
    left: 250px;
    top: 0;
    width: 125px;
    height: 125px;
    background: red;
    color: #fff;
    padding: 10px;

}

HTML:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

<div id="droppable">Drop here
<label id="l1"></label>
</div>
<div id="draggable"><input type="text" style="width: 90px;" id="t1"></div>

javascript:

var text;
$( "#draggable").draggable({
    revert: true , 

  stop: function(){
      alert("over");

      document.getElementById('t1').value  = "";
  }

});
$( "#droppable" ).droppable({
  drop: function() {
    alert( "dropped" );
    text = document.getElementById('t1').value;
    console.log(text);
    document.getElementById('l1').innerHTML = text;
 }
});

Here when draggable div drops, I want to set the text that is in textbox of draggable to label that is in droppable div but some how text is not set.

So please help me with this, I know I have make silly mistake in this but I am able to find it.

Thank you so much for your time.

Answer 1

I am not sure if I understood what you asked correctly but I wish this would help.

You can use jQuery throughout if you wish.

element.val(""); to set the text of an element.

text = draggableText.val(); to get the text of an element.

droppableText.text(text); to set the text of a label.

jsFiddle: https://jsfiddle.net/5mrz37wn/

CSS:

#draggable {
  width: 100px;
  height: 100px;
  background: blue;
}

#droppable {
  position: absolute;
  left: 250px;
  top: 0;
  width: 125px;
  height: 125px;
  background: red;
  color: #fff;
  padding: 10px;
}

HTML:

<div id="droppable">Drop here
  <label id="l1"></label>
</div>
<div id="draggable">
  <input id="t1" type="text" style="width: 90px;">
</div>

JavaScript:

var text;
var draggableText = $("#t1");
var droppableText = $("#l1");

$("#draggable").draggable({
  revert: true,
  stop: function() {
    alert("over");
    draggableText.val("");
  }

});
$("#droppable").droppable({
  drop: function() {
    alert("dropped");
    text = draggableText.val();
    console.log(text);
    droppableText.text(text);
  }
});

Some references for your jQuery study:

http://api.jquery.com/val/

http://api.jquery.com/text/

You can always refer to these documents to find more about the available methods.

Answer 2

 $(function() { $( "#draggable" ).draggable(); }); 

  #draggable { width: 150px; height: 150px; padding: 0.5em;cursor:move; } 

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div> 

More : https://jqueryui.com/draggable/

Answer 3

Try this. You can do this with javascript alone.

 window.allowDrop = function(ev) { ev.preventDefault(); if (ev.target.getAttribute("draggable") == "true") ev.dataTransfer.dropEffect = "none"; // dropping is not allowed else ev.dataTransfer.dropEffect = "all"; // drop it like it's hot }; window.drag = function(ev) { ev.dataTransfer.setData("id", ev.target.id); }; window.drop = function(ev) { ev.preventDefault(); var id = ev.dataTransfer.getData("id"); var dragged = document.getElementById(id); //dragged ev.target.appendChild(dragged); c = dragged.childNodes; document.getElementById("l1").innerHTML = c[0].value; }; 

 #draggable { width: 100px; height: 100px; background: blue; } #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 125px; background: red; color: #fff; padding: 10px; } 

  <div id="droppable" ondrop="drop(event)" ondragover="allowDrop(event)">Drop here <label id="l1"></label> </div> <div id="draggable" draggable="true" ondragstart="drag(event)"><input type="text" style="width: 90px;" id="t1"></div> 

Answer 4

This example may helps you :

 function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } function allowDrop(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } 

 .droptarget { float: left; width: 100px; height: 35px; margin: 15px; padding: 10px; border: 1px solid #aaaaaa; } 

 <p>Drag and Drop Jquery example</p> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p> </div> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <p id="example"></p>