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

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.