Welcome Guest! (App Version 3.1)

websitnero logo name

Drag And Drop

Drag and Drop API Support in HTML5

How many times have you come across the need of having that awesome feature, where you could drop flags of nations in front of their names. No such feature existed in HTML 4.01, but when came the news of HTML5, the description was clear to include this feature support into browsers. Now you have the facility of adding such a feature in your page, where the kids may go through the questions and learn through a more interactive way -- by Drag and Drop. Helping the kids go a long way! Isn't it?

Example

<head>
<style>
  #div1 {
  width: 300px;
  height: 300px; 
  border: 1px solid #000;
}
</style>
</head>

<body>

<!-- div container where image will be dropped -->
<div id="div1" ondrop="dropItem(event)" ondragover="allowDrop(event)"></div>

<!-- droppable Image -->
<img id="img1" src="image1.png" ondragstart="startDrag(event)" draggable="true" />

<script>

  function startDrag(e) {
    e.dataTransfer.setData("text", e.target.id);
  }

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

  function dropItem(e) {
    e.preventDefault();
    var data = e.dataTransfer.getData("text");
    e.target.appendChild(document.getElementById(data));
  }

</script>

</body>
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.