Write a jqery drag-and-drop plug-in by yourself.

Write a jqery drag-and-drop plug-in by yourself.

To be honest, jQuery is much easier to use than native js. It was originally intended to be written in native mode, but it does not feel like a plug-in. Therefore, jQuery is used to implement a version.

Implemented functions: You can specify the border for dragging. Several custom events can be triggered during dragging.

First, describe the principles of plug-ins I have written:

1. The constants are separated and placed in the $. zUI. plug-in.

2. The main execution function of the plug-in is named $. zUI. Plug-in. fn.

3. Name the destroy function $. zUI. Plug-in. unfn.

These specifications are mainly used to put together other plug-ins in the future for simplified code. Other rules may be added in the future to write a skeleton.

In fact, the drag principle is relatively simple, that is, after the mouse falls, add a mousemove event, let the elements move with the mouse, move the mouse up, remove the previous event. Although there are so many codes below, most of them control the drag range of elements. After these codes are ignored, there are few other things.

The main two sections of Code are as follows:

$. ZUI = $. zUI | {}/** draggable * parameter: obj {* bOffsetParentBoundary: determines whether to use the parent element as the boundary. * oBoundary: Specifies the boundary values of the left and top elements, like {iMinLeft :..., iMaxLeft :..., iMinTop :..., iMaxTop :...}, mutually Exclusive with the previous parameter * fnComputePosition: Extended Function, returns the form such as {left :..., top :...} *} * supported custom events: * "draggable. start ": drag start, which is triggered after the mouse is down *" draggable. move ": trigger multiple times during the drag process *" draggable. stop ": the drag is triggered after the mouse is up * // draggable constant $. zUI. draggable = {defaults: {bOffset ParentBoundary: false, // whether to locate the parent element as the boundary oBoundary: null, // The boundary fnComputePosition: null // The function for calculating the position}, sFlagName: "zUIdraggable", sEventName: "zUIdraggableEvent", sOptsName: "draggableOpts"} $. zUI. draggable. fn = function (ele, opts) {var jqEle = $ (ele); jqEle. data ($. zUI. draggable. sOptsName, $. extend ({}, $. zUI. draggable. defaults, opts); // if draggable has been executed for this parameter, it is returned directly, which is equivalent to modifying the configuration parameter if (jqEle. data ($. zUI. draggable. sFlagName) {return;} jq Ele. data ($. zUI. draggable. sFlagName, true); jqEle. data ($. zUI. draggable. sEventName, {mousedown: function (ev) {var opts = jqEle. data ($. zUI. draggable. sOptsName); var jqThis = $ (this); jqThis. trigger ("draggable. start "); var iOffsetX = ev. pageX-this. offsetLeft; var iOffsetY = ev. pageY-this. offsetTop; function fnMouseMove (ev) {var oPos ={}; if (opts. fnComputePosition) {oPos = opts. fnComputePosition (ev, iOffsetX, IOffsetY);} else {oPos. iLeft = ev. pageX-iOffsetX; oPos. iTop = ev. pageY-iOffsetY;} var oBoundary = opts. oBoundary; if (opts. bOffsetParentBoundary) {// If offsetParent is used as the boundary var eParent = jqThis. offsetParent () [0]; oBoundary ={}; oBoundary. iMinLeft = 0; oBoundary. iMinTop = 0; oBoundary. iMaxLeft = eParent. clientWidth-jqThis. outerWidth (); oBoundary. iMaxTop = eParent. clientHeight-jqThis. outerHeight ();} if (oBoun Dary) {// If oBoundary exists, use oBoundary as the boundary oPos. iLeft = oPos. iLeft <oBoundary. iMinLeft? OBoundary. iMinLeft: oPos. iLeft; oPos. iLeft = oPos. iLeft> oBoundary. iMaxLeft? OBoundary. iMaxLeft: oPos. iLeft; oPos. iTop = oPos. iTop <oBoundary. iMinTop? OBoundary. iMinTop: oPos. iTop; oPos. iTop = oPos. iTop> oBoundary. iMaxTop? OBoundary. iMaxTop: opos.itop?=jqthis.css ({left: oPos. iLeft, top: oPos. iTop}); ev. preventDefault (); jqThis. trigger ("draggable. move ");} var oEvent = {mousemove: fnMouseMove, mouseup: function () {$ (document ). off (oEvent); jqThis. trigger ("draggable. stop ") ;}}; $ (document ). on (oEvent) ;}}); jqEle. on (jqEle. data ($. zUI. draggable. sEventName);} $. zUI. draggable. unfn = function (e) {var jqEle = $ (ele); if (jqEle. data ($. zUI. draggable. sFlagName) {jqEle. off (jqEle. data ($. zUI. draggable. sEventName); jqEle. data ($. zUI. draggable. sFlagName, false );}}

Note the following points:

1. After the mouse falls, you must record the position of the relative element of the mouse. During the mousemove process, you must subtract the distance;

2. jQuery's data method, which is very convenient. You can bind data to the corresponding element, jq. data (key, value) is stored out, jq. data (key) is read, jq. data (obj) is also a storage.

3. undraggable removes the event function.

4. jQuery's on method is very powerful. After adding it, you can use the trigger method to trigger it. If you are interested, you can go to the official website to check the API. The on method is very violent. the user-defined function here, these two methods are used.

5. Put the method on the $ function, and put the method on the $. fn as follows:

$.each(["draggable"],function(i,widget){unWidget = "un"+widget;var w = {};w[widget] = function(args){this.each(function(){$.zUI[widget].fn(this,args);});return this;};w[unWidget] = function(){this.each(function(){$.zUI[unWidget].unfn(this);});return this;}$.fn.extend(w);});

This is not a bit messy. In fact, this writing is mainly for the convenience of writing in the future;

In addition to using jq objects, each can also use $. each (Array, fnCallBack); after adding a new plug-in, write according to my previous standards, you only need to add other strings on the first parameter.

Taking a closer look, we have added two methods: draggable and undraggable. Both of these functions call the this. each method, so that dragable and undraggable can be executed on each element.

Finally, they are all wrapped up with an anonymous function self-execution. To prevent the $ symbol from being used by other plug-ins, upload a jQuery:

(function($){          .......})(jQuery);

So far, this plug-in has been written. Below is the link of the demo.

Drag and Drop demo

Use the jQuery plug-in to drag and drop the DIV layer of a page

I wrote a few days ago .. put my QQ space .. you can check it yourself... implement a layer drag .. you can refer .. haha. if not. the code is quite understandable ..

Zhug2009.qzone.qq.com/

<Html>
<Head>
<Title> untitled document </title>
<Script src = "../jquery-1.2.1.js"> </script>
<Script>
(Function ($ ){

$. Fn. drag_div = function (event ){

Return this. mousedown (function (event ){
// When the mouse clicks, the coordinates of the mouse-left of the dragged Element
Var xforwarevent.pagex-parseint(%(this%.css ('left '));

// When the mouse clicks, the coordinates of the mouse-top Of The dragged Element
Var y=event.pagey-parseint(%(this%.css ('top '));

// Trigger the event when the mouse is not moved when the mouse is clicked
$ (This). mousemove (function (event ){

// When moving the mouse, the left and top, width, and height of the layer
Var _x=parseint((this).css ('left '));

Var _y=parseint((this(.css ('top '));

Var width = parseInt ($ (this). width ());

Var height = parseInt ($ (this). height ());

// When the coordinates of the mouse are inside the layer, a bug occurs to quickly move the mouse.
// If (event. pageX> _ x & event. pageX <(_ x + width) & event. pageY> _ y & event. pageY <(_ y + height )){

// Var pagex = event. pageX;

// Var pagey = event. pageY;

// Var now_x = event. pageX-x;

// Var now_y = event. pageY-y;

Optional (this).css ({left: now_x, top: now_y });

// Else unbinding event
//}
// Else {

// $ (This). unbind ('mousemove & #39 ...... the remaining full text>

Can I drag the Jquery plug-in directly on DreamweaverCs4 without writing code? Kneel

Jquery is not extjs, and jquery is the underlying library of js. It takes effect only when it is associated with objects. Drag is useless.