Simple drag-and-drop function via JS and no drag on specific elements

Objective

There are countless articles about the drag-and-drop function of JS, and I really don't have to go through a lot of trouble to write a repetitive article to catch the eye. The focus of this article is to explain how to disable drag and drop on certain specific elements. This is the problem I encountered when writing plug-ins, in fact, a lot of plug-in drag-and-drop function does not deal with these details, through the jquery UI source code to find the answer.

Drag-and-drop implementation

About drag and drop function no longer verbose, direct sticker code

/** * [draggable Drag Method] * @param {[type]} modal [move element] * @param {[type]} handle [drag element]*/varDraggable =function(modal, handle) {varIsdragging =false; varStartX = 0, Starty= 0, Left= 0, Top= 0; varDragStart =function(e) {varE = e | |window.event;    E.preventdefault (); Isdragging=true; StartX=E.clientx; Starty=E.clienty; Left=$ (modal). Offset (). Left; Top=$ (modal). Offset (). Top; }  varDragMove =function(e) {varE = e | |window.event;    E.preventdefault (); if(isdragging) {varEndX =E.clientx, EndY=E.clienty, Relativex= EndX-StartX, Relativey= EndY-Starty; $ (modal). css ({Left:relativex+ left + ' px ', Top:relativey+ top + ' px '      }); }    return false; }  varDragend =function(e) {isdragging=false; } $ (handle). On (' MouseDown ', DragStart); $ (document). On (' MouseMove ', DragMove); $ (document). On (' MouseUp ', dragend);}

How to use

Demo Demo HTML

<Divclass= "Modal"ID= "Modal">  <Divclass= "Modal-header">    <Buttonclass= "Btn-close"><Iclass= "fa fa-times"></I></Button>  </Div>  <Divclass= "Modal-body"></Div></Div>

Demo Demo CSS

. Modal{position:fixed;Top:100px; Left:100px;width:300px;Border:1px solid #aaa;padding:3px;Border-radius:5px;}. Modal-header{Height:24px;Line-height:24px;Background-color:#ddd;Color:#222;padding:5px;Border-radius:3px;}. Modal-body{Height:100px;}. Btn-close{width:24px;Height:24px;float: Right;padding:3px;}

Demo Demo JS

Draggable (' #modal ', ' #modal. Modal-header ');

We can specify a different drag element with the second parameter, for example, you can specify the entire modal as a drag element.

Draggable (' #modal ', ' #modal ');

Drag and drop problem

The whole drag-and-drop feature is not too much of a problem, but if we drag the Close button, we can still drag the entire modal, look less harmonious and in some cases affect the function, so we need to exclude the close button.

Ways to exclude specific elements

A lot of people recommend ways to block bubbles, but I've tried it a lot, and that's not possible because the drag event is bound to the document object. The workaround is to add the constraint at the beginning of the drag, and the code is as follows

...  varDragStart =function(e) {varE = e | |window.event;    E.preventdefault (); //get the elements you want to exclude    varElemcancel = $ (e.target). Closest (element); //If the drag is an exclusion element, the function returns    if(elemcancel.length) {return true; } isdragging=true; StartX=E.clientx; Starty=E.clienty; Left=$ (modal). Offset (). Left; Top=$ (modal). Offset (). Top; }...

Why use the closest() method? Because we exclude a specific element and also exclude its child elements. If you use native JS, you need to add a method to get the child elements. The following is the complete code:

/** * [draggable Drag Method] * @param {[type]} modal [move element] * @param {[type]} handle [drag position] * @param {[type]} cancle [exclude Element ] */varDraggable =function(modal, handle, cancle) {varIsdragging =false; varStartX = 0, Starty= 0, Left= 0, Top= 0; varDragStart =function(e) {varE = e | |window.event;    E.preventdefault (); //get the elements you want to exclude    varElemcancel =$ (e.target). closest (Cancle); //If the drag is an exclusion element, the function returns    if(elemcancel.length) {return true; } isdragging=true; StartX=E.clientx; Starty=E.clienty; Left=$ (modal). Offset (). Left; Top=$ (modal). Offset (). Top; }  varDragMove =function(e) {varE = e | |window.event;    E.preventdefault (); if(isdragging) {varEndX =E.clientx, EndY=E.clienty, Relativex= EndX-StartX, Relativey= EndY-Starty; $ (modal). css ({Left:relativex+ left + ' px ', Top:relativey+ top + ' px '      }); }    return false; }  varDragend =function(e) {isdragging=false; } $ (handle). On (' MouseDown ', DragStart); $ (document). On (' MouseMove ', DragMove); $ (document). On (' MouseUp ', dragend);}

View Code

The JS modification of the above case is as follows:

Draggable (' #modal ', ' #modal. Modal-header ', ' #modal. Btn-close ');

Summarize

In fact, this drag-and-drop case is a simple implementation of the jquery UI drag-and-drop feature. It is still the old adage that it is not difficult to achieve a function, but if we want to do it well, we need to consider a lot of details, and perhaps most of the time we spend on tweaking the details.

Related projects recommended: A powerful jQuery picture viewer

Simple drag-and-drop function via JS and no drag on specific elements