Requirements:
(1) drag and drop implementation elements
(2) customize the drag range
(3) custom elements that trigger drag by pressing
(4) event listening during drag and drop
Implementation ideas:The key to implementing drag-and-drop is mousedown, mousemove, and mouseup. Mousedown is an event that triggers drag by pressing. You can define the element itself or other elements. mousemove is an event of the drag range element. This event is responsible for resetting the position attribute of the drag element; mouseup is an event of the drag range element. This event is mainly used to release the mousemove and mouseup events.
To avoid the performance impact caused by re-drawing the position when the content of the drag element is large, you can drag an empty element (proxy) to achieve the drag process. When the drag ends, then adjust the location of the actual element.
Legend: Customer Code:1 <body> 2 <div id = "header"> 3Component code:
1 /************************************** * *** Author: hjwen 3 * Email: hjwen88@126.com 4 * version: 1.0 5 * copyright license: general open source license agreement V1.0 6 * description: you can drag components to define 7 *********************************** */8 (function ($) {9/* drag and drop the rendering target: mousedown --> mousemove ---> mouseup ************/11 function renderHtml (target) {12 var settings = target. data ('settings'); 13 target.css ("position", "absolute"); 14 set Tings.dragArea.css ("position", "relative"); 15 var offset; 16 if (settings. isWindows) {// If the drag range is window, you need to place the object under the body 17 offset = target. offset (); 18 target.css ({top: offset. top, left: offset. left}); 19 target. appendTo (settings. dragArea); 20} 21 var areawith = settings. dragArea. innerWidth (); 22 var areaheight = settings. dragArea. innerHeight (); 23 var targetwidth = target. innerWidth (); 24 var ta Rgeheight = target. innerHeight (); 25 var proxy = null; 26/**************** lower version ie Mouse capture feature processing ************** * ******/27 var isCapture = false; 28 if (typeof settings. mousedownObj [0]. setCapture! = 'Undefined') {29 isCapture = true; 30} 31 settings.mousedownObj.css ("cursor", "move"); 32 settings. mousedownObj. bind ("mousedown", function (e) {33 if (isCapture) {34 settings. mousedownObj [0]. setCapture (); 35} 36 // calculates the drag range: 37 var offset = target. position (); 38 var finalleft rows target.css ('left'); 39 var finaltop = target.css ('top'); 40 if (settings. proxy) {// create an empty proxy 41 proxy =$ ("<div style = \" curs Or: move; position: absolute; background: # C9C4F5; height: "+ targeheight +" px; width: "+ targetwidth +" px; opacity: 0.85; top: "+ finaltop +"; left: "+ finalleft +"; filter: alpha (opacity = 85) \ "> </div> "). insertAfter (target); 42} 43 e. preventDefault (); 44 var diffX = e. clientX-offset. left; 45 var diffY = e. clientY-offset. top; 46 if (typeof settings. onStart = 'function') {47 settings. onStart ({Top: offset. top, left: offset. left}); 48} 49 settings. dragArea. bind ("mousemove", function (e) {50 var left = e. clientX-diffX; 51 var top = e. clientY-diffY; 52 if (left <0) {53 left = 0; 54} else {55 var w = areawith-targetwidth; 56 if (left> w) 57 left = w; 58} 59 if (top <0) {60 top = 0; 61} else {62 var h = areaheight-targeheight; 63 if (top> h) 64 top = h; 65} 66 if (set Invalid. proxy) {67 finalleft = left; 68 finaltop = top; 69 proxy.css ({left: left + "px", top: top + "px "}); 70} else {71 target.css ({left: left + "px", top: top + "px"}); 72} 73 if (typeof settings. onDraging = 'function') {74 settings. onDraging ({top: top, left: left}); 75} 76}); 77 settings. dragArea. bind ("mouseup", function (e) {78 settings. dragArea. unbind ("mousemove"); 79 settings. d RagArea. unbind ("mouseup"); 80 if (settings. proxy) {81 proxy. remove (); 82 proxy = null; 83 target.css ({left: finalleft + "px", top: finaltop + "px"}); 84} 85 if (isCapture) {86 settings. mousedownObj [0]. releaseCapture (); 87} 88 if (typeof settings. onStop = 'function') {89 settings. onStop ({top: finaltop, left: finalleft}); 90} 91}); 92}); 93 }; 94 ********************/ 95/********************************/96 var methods = {97 init: function (options) {98 if (typeof options = 'undefined') 99 options = {}; 100 return this. each (function () {101 var $ this = $ (this); 102 if (typeof options. dragArea! = 'Undefined') {103 options. isWindows = false; 104 if (typeof options. dragArea = 'string') {105 options. dragArea = $ ("#" + options. dragArea); 106} 107} else {108 options. isWindows = true; 109} 110 if (typeof options. mousedownObj = 'string') {111 options. mousedownObj = $ ("#" + options. mousedownObj); 112} 113 $. fn. draggable. defaults. mousedownObj = $ this; 114 $. fn. draggable. defaults. dragArea = $ (window .Top.doc ument. body); 115 var settings = $ this. data ('settings'); 116 if (typeof settings = 'undefined') {117 settings = $. extend ({}, $. fn. draggable. defaults, options); 118 $ this. data ('settings', settings); 119} else {120 settings = $. extend ({}, settings, options); 121} 122 // create a ui layout 123 renderHtml ($ this); 124 if ($. myui. isDebug) {125 $. myui. log ("jQuery. draggable init finish ...... "); 126} 127}); 128}, 129 Destroy: function (options) {130 return $ (this ). each (function () {131 var $ this = $ (this); 132 $ this. removeData ('settings'); 133}); 134} 135}; 136/***** 137 * options = {mousedownObj: null, // press the object/id with the mouse, the default is to drag the object itself 138 proxy: true, // create a proxy to drag the object, better performance 139 dragArea: null, // default drag range object/Id, if this parameter is not set, it is the top-level window (considering iframe) 140 onStart: function (params) {}, // start to drag params = {top: x, left: y} 141 onDraging: function (params ){},// Drag params = {top: x, left: y} 142 onStop: function (params) {}// drag params = {top: x, left: y} 143} 144 *****/145 $. fn. draggable = function (dragArea) {146 var method = arguments [0]; 147 if (methods [method]) {148 method = methods [method]; 149 arguments = Array. prototype. slice. call (arguments, 1); 150} else if (typeof (method) = 'object' |! Method) {151 if ($. myui. isDebug) {152 $. myui. log ("jQuery. draggable init ..... "); 153} 154 method = methods. init; 155} else {156 $. error ('method' + Method + 'does not exist on jQuery. draggable '); 157 return this; 158} 159 return method. apply (this, arguments); 160}; 161 // default value: 162 $. fn. draggable. defaults = {163 mousedownObj: null, // press the object/id with the mouse, the default is to drag the object itself 164 proxy: true, // create a proxy drag object, better performance 165 dragArea: null, // default drag range object/Id. If this parameter is not set, it is the top-level window (considering iframe). 166 onStart: null, // start to drag 167 onDraging: null, // drag 168 onStop: null // drag 169}; 170}) (jQuery );
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
