Simple drag effect, free drag div implementation and note, drag effect drag div

Source: Internet
Author: User

Simple drag effect, free drag div implementation and note, drag effect drag div

Accidentally saw a simple div drag effect previously made, modified some notes, the test is perfect through firefox/chrome/ie6-11, is now used to share.

First, let's talk about the implementation principles and key points. There are three major steps. The first step is the mousedown event. When the mouse mousedown, record the X and Y axes of the mouse and the left and top of the drag and drop boxes, and assign true to the drag mark, which indicates that the drag and drop operation is ready. The second step is the mousemove event. At this time, the X and Y axes of the mouse are dynamically obtained, and the left and top of the drag box are calculated and assigned values to implement the drag effect. The third step is the mouseup event. When the mouse is started, the drag tag is assigned false, and the drag operation is complete.

The html code is as follows:

<div class="divWrap" id="move1" style="width: 200px; height: 200px; background: Green; border: 1px solid red; position: absolute; top: 100px; left: 100px; cursor: move; -moz-user-select: none; -webkit-user-select: none;"></div><div class="divWrap" style="width: 200px; height: 200px; background: brown; border: 1px solid red; position: absolute; top: 300px; left: 100px;">    

The js Code is as follows:

(Function ($) {$. fn. dragDiv = function (divWrap) {return this. each (function () {var $ divMove = $ (this); // drag the area var $ divWrap = divWrap? $ DivMove. parents (divWrap): $ divMove; // var mX = 0, mY = 0; // defines the X axis of the mouse, var dX = 0, dY = 0; // define the left and top positions of the div var isDown = false; // mousedown mark if (document. attachEvent) {// ie event listener. When you drag a div, the selected content is forbidden. firefox and chrome have set-moz-user-select: none in css; -webkit-user-select: none; $ divMove [0]. attachEvent ('onselectstart', function () {return false ;}) ;}$ divMove. mousedown (function (event) {var event = event | window. event; mX = event. clientX; mY = event. clientY; dX = $ divWrap. offset (). left; dY = $ divWrap. offset (). top; isDown = true; // drag and drop the mouse to start}); $ (document ). mousemove (function (event) {var event = event | window. event; var x = event. clientX; // the X axis var y = event when the mouse slides. clientY; // the y axis if (isDown) {nvidivwrap.css ({"left": x-mX + dX, "top": y-mY + dY}) when the mouse slides }); // div dynamic position assignment}); $ divMove. mouseup (function () {isDown = false; // drag the mouse to end}) ;};}) (jQuery); // $ (document ). ready (function () {$ ("# move1 "). dragDiv (); // drag the entire div $ ("# move2 "). dragDiv (". divWrap "); // drag the div header });

Finally, you need to disable the selected content before starting the drag action. Otherwise, the drag effect will be affected. Firefox and chrome can be set through css: {-moz-user-select: none;-webkit-user-select: none ;}, ie can also directly write an onselectstart = "return false" in html, but chrome seems to be affected, so I decided to cancel this writing, then, write an onselectstart event for IE browser in js.

This small plug-in is simple to implement drag-and-drop effects, but the compatibility is very good, it also uses some knowledge points and techniques. Of course, you can also use this plug-in or the idea to continue to expand and write a relatively complete drag-and-drop plug-in (such as Draggable and Droppable ).


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: 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.