Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Basic Drag and Drop</title>
<style>
#drop {
  min-height: 100px;
  width: 200px;
  border: 3px dashed #ccc;
  margin: 10px;
  padding: 10px;
  clear: left;
}
p {
  margin: 3px 0;
}
#remy {
  background: url(http://twitter.com/api/users/profile_image/rem) no-repeat;
}
#brucel {
  background: url(http://twitter.com/api/users/profile_image/brucel) no-repeat;
}
#Rich_Clark {
  background: url(http://twitter.com/api/users/profile_image/Rich_Clark) no-repeat;
}
#leads {
  background: url(http://twitter.com/api/users/profile_image/leads) no-repeat;
}
#akamike {
  background: url(http://twitter.com/api/users/profile_image/akamike) no-repeat;
}
#jackosborne {
  background: url(http://twitter.com/api/users/profile_image/jackosborne) no-repeat;
}
.drag {
  height: 48px;
  width: 48px;
  float: left;
  -khtml-user-drag: element;
  margin: 10px;
}
</style>
<script src="http://html5demos.com/h5utils.js"></script>
</head>
<body>
  <div class="drag" id="remy" draggable="true"></div>
  <div class="drag" id="brucel" draggable="true"></div>
  <div class="drag" id="Rich_Clark" draggable="true"></div>
  <div class="drag" id="leads" draggable="true"></div>
  <div class="drag" id="akamike" draggable="true"></div>
  <div class="drag" id="jackosborne" draggable="true"></div>
  
  <div id="drop"></div>
</body>
</html>
 
function cancel(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }
  return false;
}
​
var dragItems = document.querySelectorAll('[draggable=true]');
​
for (var i = 0; i < dragItems.length; i++) {
  addEvent(dragItems[i], 'dragstart', function (event) {
    // store the ID of the element, and collect it on the drop later on
    event.dataTransfer.setData('Text', this.id);
  });
}
​
var drop = document.querySelector('#drop');
​
// Tells the browser that we *can* drop on this target
addEvent(drop, 'dragover', cancel);
addEvent(drop, 'dragenter', cancel);
​
addEvent(drop, 'drop', function (e) {
  if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.
​
  this.innerHTML += '<p>' + e.dataTransfer.getData('Text') + '</p>';
  return false;
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rempro
0viewers