CODEWITHSUNDEEP
javascriptjqueryhtmldraggable
Sinan Samet
Sinan Samet

Reputation: 6752

Draggable is not dragging

Somehow my draggables arn't dragging anymore into the placeholders.

I noticed it gives an error on the appendChild in the drop() function but when I alert in there I notice it doesn't even get that far.

var people = ['Sinan', 'Babette', 'Thomas', 'Yannick', 'Nick'];
$.each(people, function(key, val) {
  $('#placeholders').append('<div class="dnd" data-id="' + val + '" ondrop="drop(event)" ondragover="testDiv(event, innerHTML)"></div>');
});

$('#seizeImg img').on('dragstart', function(event) {
  drag(event);
});

function testDiv(ev, x) {
  if (x.length > 0) {
    return false;
  } else {
    allowDrop(ev);
    return true;
  }
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));

  var complete = false;
  $.each('#seizeImg img', function(key, val) {
    alert(key);
  });
}
.dnd {
  display: inline-block;
  vertical-align: top;
  width: 10%;
  height: 160px;
  padding: 10px;
  border: 2px solid #B7E6E6;
  background: rgba(51, 255, 102, 0.2);
}

#seizeImg img {
  width: 10%;
  height: 160px;
}

div.label {
  height: 25px;
  text-align: center;
  border: none;
  background: none;
}

div.buf {
  background: rgba(255, 0, 0, 0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="placeholders">
</div>
<br>
<br>
<div id="seizeImg">
  <img id="Babette" src="img/Babette.jpg" draggable="true" ondrop="drop(event)" width="186" height="186">
  <img id="Thomas" src="img/Thomas.jpg" draggable="true" ondrop="drop(event)" width="186" height="186">
  <img id="Yannick" src="img/Yannick.jpg" draggable="true" ondrop="drop(event)" width="186" height="186">
  <img id="Sinan" src="img/Sinan.jpg" ondrop="drop(event)" draggable="true" ondrop="drop(event)" width="186" height="186">
  <img id="Nick" src="img/Nick.jpg" ondrop="drop(event)" draggable="true" ondrop="drop(event)" width="186" height="186">
</div>

Upvotes: 1

Views: 288

Answers (2)

Jeanze
Jeanze

Reputation: 159

I am assuming you are using jqueryUI with the drag and drop libraries installed. If you aren't that might make things a little easier for you.

you could make it work with:

$('#seizeImg img').draggable();

and if you wanted the drop to save data all you have to do is:

 $('#placeholders').droppable({
accept: $('#seizeImg img'),
drop: function(){
//enter code here to take place whenever you drop something on it
// if you want to take a value from the object you are dropping on
// the droppable object just use:
var varID = (ui.draggable.attr("value");
    }
});

Its a little more concise and jqueryUI takes out a lot of the guess work.

EDIT: Unless you didn't include the code up top, you never call the actual jqueryUI draggable function. somewhere around

  $(document).ready({function(){   
     // you have to include 
$('seizeImg img').draggable({function(){ 
    //add some more moving parts here if you need to
    });   
 }

just setting draggable='true' in your HTML isn't the same thing.

Upvotes: 1

mic4ael
mic4ael

Reputation: 8300

The problem you are facing is caused by the lines below

 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));

You are trying to append an element that is not of Node type. That is happening because data is an empty string thus document.getElementById("") returns null which is not allowed to be passued to appendChild.

Upvotes: 1

Related Questions