HTML5 practice and analysis-native drag-and-drop (History overview)

Source: Internet
Author: User

When talking about drag and drop, I think of a very interesting effect during JavaScript training, that is, drag and drop. You can drag an object to any place you want.

The earliest JavaScript drag-and-drop feature was the IE4 browser. At that time, there were only two types of objects on the webpage that can be dragged: graphics and some text. When dragging an image, place the mouse over the image, and hold down the mouse to drag it. When dragging a text, you must first select the text, and then drag the selected text as you drag an image. In IE4, the only valid target for dragging text is text box. Go to IE5.5 and drag any elements on the webpage (IE6 and above also support these functions ). With the upgrading of browsers and the emergence of IE7IE8 and other browsers, everything on the web page can be dragged, but it is implemented through JavaScript programs. The following is a small implementation example of drag-and-drop when HTML5 is not available.


  HTML code


Menglong xiaozhan

  JavaScript code


Window. onload = function () {var oDiv = document. getElementById ('div1 '); var disX = 0; var disY = 0; oDiv. onmousedown = function (ev) {var ev = ev | window. event; disX = ev. clientX-oDiv. offsetLeft; disY = ev. clientY-oDiv. offsetTop; // in IE, if you drag the selected element, the following error occurs: iesets Global Capture: setCapture releases Global Capture: releaseCaptureif (oDiv. setCapture) {oDiv. setCapture ();} document. onmousemove = function (ev) {var ev = ev | window. event; oDiv. style. left = ev. clientX-disX + 'px '; oDiv. style. top = ev. clientY-disY + 'px';}; document. onmouseup = function () {document. onmousemove = null; document. onmouseup = null; if (oDiv. releaseCapture) {oDiv. releaseCapture () ;}}; // if you drag an empty tag in a standard browser, the following error occurs: return false // if you drag an image in a standard browser, the following error occurs: return falsereturn false ;};};

  CSS code


li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}#div1{ width:100px; height:100px; background:red; margin:300px;}


Until HTML5 appears. HTML5 adopts the drag-and-drop specification based on IE. Browsers that support native drag-and-drop are Chrome, Safari 3 +, and Firefox 3.5 +.

In HTML5, you can drag between windows, between frames, or even between applications. The support for drag and drop by the browser facilitates the implementation of this function.

HTML5 practice and analysis-native drag-and-drop (1)-an overview of drag-and-drop history. With HTML5 drag, you can achieve a lot of brilliant results. For more HTML5 updates, please stay tuned to Menglong xiaozhan.







Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.