[Reprint] example of dragging and dropping a DIV in a webpage and stopping a div

Source: Internet
Author: User

The source is not available, just add it to favorites. Save the code as test.htm and open it in the browser to see the effect.

 

This example not only supports drag and drop, but also supports dock.

 

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <br/> <title> freedom </title> <br/> <MCE: style type =" text/CSS "> <! -- <Br/> body {<br/> width: 100%; <br/> MAX-Height: 100%; <br/> padding: 0px; <br/> margin: 0px; <br/> text-align: center; <br/>}< br/>. cell {<br/> float: Left; <br/> clear: Right; <br/>}< br/>. row {<br/> clear: Both; <br/>}< br/>. r_nbsp {<br/> width: 20px; <br/>}< br/>. root {<br/> width: 868px; <br/> margin: 0 auto; <br/>}< br/>. root * {<br/>/* attribute FF Description */<br/>-moz-user-select: none; <br/>}< br/>. line {<br/> width: 2 02px; <br/> line-Height: 20px; <br/> Height: 20px; <br/> overflow: hidden; <br/> font-size: 12px; <br/>}< br/>. move {<br/> border: # cccccc 1px solid; <br/> width: 200px; <br/> Height: aotu; <br/>}< br/>. title {<br/> Height: 24px; <br/> cursor: move; <br/> Background: #0080c0; <br/> font-size: 12px; <br/> font-weight: bold; <br/> color: # ffffff; <br/> line-Height: 24px; <br/> text-align: center; <br/>}< br/>. content {<br/> Bo Rder-top: # cccccc 1px solid; <br/> Height: 100px; <br/> background-color: # f7f7f7; <br/>}< br/>. cdrag_temp_div {<br/> border: # cccccc 1px dashed; <br/>}< br/> --> </MCE: style> <style type = "text/CSS" mce_bogus = "1"> body {<br/> width: 100%; <br/> MAX-Height: 100%; <br/> padding: 0px; <br/> margin: 0px; <br/> text-align: center; <br/>}< br/>. cell {<br/> float: Left; <br/> clear: Right; <br/>}< br/>. row {<br/> clear: Both; <BR/>}< br/>. r_nbsp {<br/> width: 20px; <br/>}< br/>. root {<br/> width: 868px; <br/> margin: 0 auto; <br/>}< br/>. root * {<br/>/* attribute FF Description */<br/>-moz-user-select: none; <br/>}< br/>. line {<br/> width: 202px; <br/> line-Height: 20px; <br/> Height: 20px; <br/> overflow: hidden; <br/> font-size: 12px; <br/>}< br/>. move {<br/> border: # cccccc 1px solid; <br/> width: 200px; <br/> Height: aotu; <br/>}< br/>. title {<br/> Height: 24px; <br/> cursor: move; <br/> Background: #0080c0; <br/> font-size: 12px; <br/> font-weight: bold; <br/> color: # ffffff; <br/> line-Height: 24px; <br/> text-align: center; <br/>}< br/>. content {<br/> border-top: # cccccc 1px solid; <br/> Height: 100px; <br/> background-color: # f7f7f7; <br/>}< br/>. cdrag_temp_div {<br/> border: # cccccc 1px dashed; <br/>}</style> <br/> <MCE: Script Type = "text/JavaScript"> <! -- <Br/> var class ={< br/> // create a class <br/> Create: function () {<br/> return function () {<br/> This. initialize. apply (this, arguments); <br/>}; <br/>}< br/>}; <br/> var $ A = function () {<br/> // convert the array <br/> return? Array. apply (null, A): new array; <br/>}; <br/> var $ = function (ID) {<br/> // obtain the object <br/> return document. getelementbyid (ID); <br/>}; <br/> object. extend = function (a, B) {<br/> // append method <br/> for (var I in B) A [I] = B [I]; <br/> return a; <br/>}; <br/> object. extend (object, {<br/> addevent: function (A, B, C, D) {<br/> // Add a function <br/> If (. attachevent). attachevent (B [0], c); <br/> else. addeventlistener (B [1] | B [0]. replace (/^ on/, ""), c, d | false); <br/> return C; <br/>}, <br/> delevent: function (A, B, C, D) {<br/> If (. detachevent). detachevent (B [0], c); <br/> else. removeeventlistener (B [1] | B [0]. replace (/^ on/, ""), c, d | false); <br/> return C; <br/>}, <br/> reevent: function () {<br/> // obtain the event <br/> return window. event? Window. event: (function (o) {<br/> do {<br/> O = O. Caller; <br/>}while (O &&! /^/[Object [A-Za-Z] * event/] $ /. test (O. arguments [0]); <br/> return O. arguments [0]; <br/>}) (this. reevent); <br/>}< br/>}); <br/> function. prototype. bind = function () {<br/> // bind event <br/> var WC = this, A = $ A (arguments), O =. shift (); <br/> return function () {<br/> WC. apply (O,. concat ($ A (arguments); <br/>}; <br/> var table = Class. create (); <br/> table. prototype = {<br/> initialize: Function () {<Br/> // initialization <br/> var WC = This; <br/> WC. cols = new array; // create a column <br/>}, <br/> addcols: function (o) {<br/> // Add column <br/> var WC = This, cols = WC. cols, I = cols. length; <br/> return Cols [I] ={< br/> ID: I, div: O, rows: New array, // create a row <br/> addrow: WC. addrow, chrow: WC. chrow, inrow: WC. inrow, delrow: WC. delrow <br/>}; <br/>}, <br/> addrow: function (o) {<br/> // Add a row <br/> var WC = This, rows = WC. rows, I = rows. length; <br/> return rows [I] ={< br/> ID: I, div: O, cols: WC <br/>}; <br/> }, <br/> inrow: function (a, B) {<br/> // insert a row <br/> var WC = B. cols = This, rows = WC. rows, I; <br/> if (a <rows. length) {<br/> for (I = A; I <rows. length; I ++) rows [I]. id ++; <br/> rows. splice (A, 0, B); <br/> B. id = A; <br/> return B; <br/>}else {<br/> B. id = rows. length; <br/> return rows [B. id] = B; <BR/>}< br/>}, <br/> delrow: function (a) {<br/> // delete a column <br/> var WC = This, rows = WC. rows, I, R; <br/> if (a> = rows. length) return; <br/> r = rows [a]; <br/> rows. splice (A, 1); <br/> for (I = A; I <rows. length; I ++) rows [I]. id = I; <br/> return r; <br/>}< br/>}; <br/> var cdrag = Class. create (); <br/> cdrag. ie =/MSIE /. test (window. navigator. useragent); <br/> cdrag. prototype = {<br/> initialize: funct Ion () {<br/> // initialize the member <br/> var WC = This; <br/> WC. table = new table; // create a table object <br/> WC. ifunc = WC. efunc = NULL; <br/> WC. OBJ = {on: {A: NULL, B: ""}, row: NULL, left: 0, top: 0 };< br/> WC. temp = {row: NULL, div: document. createelement ("Div") }; <br/> WC. temp. div. setattribute (cdrag. ie? "Classname": "class", "cdrag_temp_div"); <br/> WC. temp. div. innerhtml = ""; <br/>}, <br/> remouse: function (a) {<br/> // obtain the mouse position <br/> var E = object. reevent (); <br/> return {<br/> X: document.doc umentelement. scrollleft + E. clientx, <br/> Y: document.doc umentelement. scrolltop + E. clienty <br/>}; <br/>}, <br/> reposition: function (o) {<br/> // obtain the absolute position of an element <br/> var $ x = $ y = 0; <br/> do {<br/> $ x + = O. off Setleft; <br/> $ Y + = O. offsettop; <br/>}while (O = O. offsetparent) & O. tagname! = "Body"); <br/> return {X: $ X, Y: $ y };< br/>}, <br/> smove: function (o) {<br/> // set the parameter when the drag starts <br/> var WC = This; <br/> If (WC. ifunc | WC. efinc) return; <br/> var mouse = WC. remouse (), OBJ = WC. OBJ, temp = WC. temp, DIV = O. div, position = WC. reposition (DIV); <br/> obj. row = O; <br/> obj. on. B = "me"; <br/> obj. left = mouse. x-position. x; <br/> obj. top = mouse. y-position. y; <br/> temp. row = document. Body. appendchild (div. clonenode (true); // copy the pre-drag object <br/> with (temp. row. style) {<br/> // set the copy object <br/> position = "absolute"; <br/> left = mouse. x-obj. left + "PX"; <br/> Top = mouse. y-obj. top + "PX"; <br/> zindex = 100; <br/> opacity = "0.3"; <br/> filter = "alpha (opacity: 30 )"; <br/>}< br/> with (temp. div. style) {<br/> // sets the position object <br/> Height = div. clientheight + "PX"; <br/> width = div. clientwidth + "PX"; <br />}< Br/>/* Div. parentnode. insertbefore (temp. div, Div); <br/> Div. style. display = "NONE"; // hide the pre-drag object */<br/> Div. parentnode. replaceChild (temp. div, Div); <br/> WC. ifunc = object. addevent (document, ["onmousemove"], WC. imove. BIND (WC); <br/> WC. efunc = object. addevent (document, ["onmouseup"], WC. emove. BIND (WC); <br/> document. onselectstart = new function ("Return false"); <br/>}, <br/> imove: function () {<Br/> // when the mouse moves, set the parameter <br/> var WC = This, cols = WC. table. cols, mouse = WC. remouse (), OBJ = WC. OBJ, temp = WC. temp, row = obj. row, DIV = temp. row, <br/> t_position, t_cols, t_rows, I, j; <br/> with (div. style) {<br/> left = mouse. x-obj. left + "PX"; <br/> Top = mouse. y-obj. top + "PX"; <br/>}< br/> for (I = 0; I <cols. length; I ++) {<br/> t_cols = Cols [I]; <br/> t_position = WC. reposition (t_cols.div ); <Br/> If (t_position.x <mouse. X & t_position.x + t_cols.div.offsetwidth> mouse. x) {<br/> If (t_cols.rows.length> 0) {// if the number of rows in this column is greater than 0 <br/> If (WC. reposition (t_cols.rows [0]. div ). Y + 20> mouse. y) {<br/> // If the cursor position is greater than the top of the first line .. <Br/> // up <br/> obj. on. A = t_cols.rows [0]; <br/> obj. on. B = "up"; <br/> obj. on. a. div. parentnode. insertbefore (temp. div, obj. on. a. div); <br/>} else if (t_cols.rows.length> 1 & t_cols.rows [0] = row & <br/> WC. reposition (t_cols.rows [1]. div ). Y + 20> mouse. y) {<br/> // if the first row is a drag object and the cursor is greater than the second row, no motion is performed .. <Br/> // up <br/> obj. on. B = "me"; <br/> t_cols.rows [1]. div. parentnode. insertbefore (temp. div, t_cols.rows [1]. div); <br/>}else {<br/> for (j = t_cols.rows.length-1; j>-1; j --) {<br/> // resend to upstream query <br/> t_rows = t_cols.rows [J]; <br/> If (t_rows = obj. row) continue; <br/> If (WC. reposition (t_rows.div ). Y <mouse. y) {<br/> // If the cursor is greater than this line, it is under this line <br/> If (t_rows.id + 1 <t_cols.rows.length & t_cols.rows [t_ro WS. ID + 1]! = Obj. row) {<br/> // if this row has the next row, insert the row above the next row. <br/> t_cols.rows [t_rows.id + 1]. div. parentnode. <br/> insertbefore (temp. div, t_cols.rows [t_rows.id + 1]. div); <br/> obj. on. A = t_rows; <br/> obj. on. B = "down"; <br/>} else if (t_rows.id + 2 <t_cols.rows.length) {<br/> // if the next row of the row is a drag object, the row is inserted to the next two rows, that is, the drag object returns the original position <br/> t_cols.rows [t_rows.id + 2]. div. parentnode. <br/> insertbefore (temp. div, t_cols.rows [t_rows.id + 2]. div); <br /> Obj. on. B = "me"; <br/>}else {<br/> // If none of the preceding conditions are met, put them in the lowest row <br/> t_rows.div.parentnode.appendchild (temp. div); <br/> obj. on. A = t_rows; <br/> obj. on. B = "down"; <br/>}< br/> return; <br/>}< br/>} else {<br/> // Add a new row without content in this column <br/> t_cols.div.appendchild (temp. div); <br/> obj. on. A = t_cols; <br/> obj. on. B = "new"; <br/>}< br/>}, <br/> emove: function () {<br/> // set the parameter when the mouse is released <br/> var WC = th Is, OBJ = WC. OBJ, temp = WC. temp, row = obj. row, DIV = row. div, o_cols, n_cols; <br/> If (obj. on. B = "up") {<br/> // Add to the top <br/> o_cols = obj. row. cols; <br/> n_cols = obj. on. a. cols; <br/> n_cols.inrow (0, o_cols.delrow (obj. row. ID); <br/>}else if (obj. on. B = "down") {<br/> // Add <br/> o_cols = obj. row. cols; <br/> n_cols = obj. on. a. cols; <br/> n_cols.inrow (obj. on. a. ID + 1, o_cols.delrow (obj. row. ID); <Br/>} else if (obj. on. B = "new") {<br/> // Add to the non-content column <br/> o_cols = obj. row. cols; <br/> n_cols = obj. on. a; <br/> n_cols.inrow (0, o_cols.delrow (obj. row. ID); <br/>}< br/> temp. div. parentnode. replaceChild (DIV, temp. div); <br/> temp. row. parentnode. removechild (temp. row); <br/> Delete temp. row; <br/> object. delevent (document, ["onmousemove"], WC. ifunc); <br/> object. delevent (document, ["onmouseup"], WC. efunc); <Br/> document. onselectstart = WC. ifunc = WC. efunc = NULL; <br/>}, <br/> Add: function (o) {<br/> // Add an object <br/> var WC = this; <br/> object. addevent (O. div. childnodes [cdrag. ie? 0: 1], ["onmousedown"], WC. smove. BIND (WC, O); <br/>}, <br/> parse: function (o) {<br/> // initialize the member <br/> var WC = This, table = WC. table, cols, I, j; <br/> for (I = 0; I <O. length; I ++) {<br/> Cols = table. addcols (O [I]. cols); <br/> for (j = 0; j <o [I]. rows. length; j ++) <br/> WC. add (cols. addrow (O [I]. rows [J]); <br/>}< br/>}; <br/> object. addevent (window, ["onLoad"], function () {<br/> var WC = new cdrag; <br/> WC. parse ([<br/>{< br/> Cols: $ ("M_1"), rows: [$ ("m_1_1"), $("m_1_2 "), $ ("m_1_3"), $ ("m_1_4")] <br/>}, <br/>{< br/> Cols: $ ("M_2"), rows: [$ ("m_2_1"), $ ("m_2_2"), $ ("m_2_3"), $ ("m_2_4")] <br/> }, <br/>{< br/> Cols: $ ("M_3"), rows: [$ ("m_3_1"), $("m_3_2 "), $ ("m_3_3"), $ ("m_3_4")] <br/>}, <br/>{< br/> Cols: $ ("M_4"), rows: [$ ("m_4_1"), $ ("m_4_2"), $ ("m_4_3"), $ ("m_4_4")] <br/>}< br/>]); <br/>}); <br/> // --> </MCE: SCRIPT> <br/> </pead> <body> <br/> <Div class = "root"> <br/> <Div class = "cell" id = "M_1"> <br/> <Div class = "line"> <br/> first column </div> <br/> <Div class = "move" ID = "m_1_1"> <br/> <Div class = "title"> <br/> first statement in the first column </div> <br/> <Div class = "content"> <br/> </div> <br/> <Div class = "move" id = "m_1_2"> <br/> <Div class = "title"> <br/> the second statement in the first column </div> <br/> <Div class = "content"> <br/> </div> <br/> <Div class = "move" id = "m_1_3"> <br/> <Div class = "title"> <br/> third statement in the first column </div> <br/> <Div class = "content"> <br/> </div> <br/> </div> <br/> <Div class = "move" id = "m_1_4"> <br/> <Div class = "title"> <br/> fourth statement </div> <br/> <Div class = "content"> <br/> </div> <br/> </div> <br/> <Div class = "cell r_nbsp"> <br/> </div> <br/> <Div class = "cell" id = "M_2 "> <br/> <Div class =" line "> <br/> second column </div> <br/> <Div class =" move "id =" m_2_1"> <br/> <Div class = "title"> <br/> the first statement in the second column </div> <br/> <Div class = "content"> <br/> </div> <br/> <Div class = "move" id = "m_2_2"> <br/> <Div class = "title"> <br/> description of the second column </div> <br/> <Div class = "content"> <br/> </div> <br/> </div> <br/> <Div class = "move" id = "m_2_3"> <br/> <Div class = "title"> <br/> third statement in the second column </div> <br/> <Div class = "content"> <br/> </div> <br/> <Div class = "move" id = "m_2_4"> <br/> <Div class = "title"> <br/> fourth comment in the second column </div> <br/> <Div class = "content"> <br/> </div> <br/> <Div class = "cell r_nbsp"> <br/> </div> <br/> <Div class = "cell" id = "M_3"> <br /> <Div class = "line"> <br/> third column </div> <br/> <Div class = "move" id = "m_3_1"> <br/> <Div class = "title"> <br/> first remark of the third column </div> <br/> <Div class = "content"> <br/> </div> <br/> <Div class = "move" id = "m_3_2"> <br/> <Div class = "title"> <br/> the second statement in the third column </div> <br/> <Div class = "content"> <br/> </div> <br/> </div> <br/> <Div class = "move" id = "m_3_3"> <br/> <Div class = "title"> <br/> third statement </div> <br/> <Div class = "content"> <br/> </div> <br/> <Div class = "move" id = "m_3_4"> <br/> <Div class = "title"> <br/> description of the fourth column </div> <br/> <Div class = "content"> <br/> </div> <br/> <Div class = "cell r_nbsp"> <br/> </div> <br/> <Div class = "cell" id = "M_4"> <br/> <Div class = "line"> <br/> column 4 </div> <br/> <Div class = "move" id = "m_4_1"> <br/> <Div class = "title"> <br/> the first statement in column 4 </div> <br/> <Div class = "content"> <br/> </div> <br/> </div> <br/> <Div class = "move" id = "m_4_2"> <br/> <Div class = "title"> <br/> The second statement in column 4 </div> <br/> <Div class = "content"> <br/> </div> <br/> <Div class = "move" id = "m_4_3"> <br/> <Div class = "title"> <br/> third statement of column 4 </div> <br/> <Div class = "content"> <br/> </div> <br/> <Div class = "move" id = "m_4_4"> <br/> <Div class = "title"> <br/> statement of the fourth column </div> <br/> <Div class = "content"> <br/> </div> <br/> </body> </ptml>

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: info-contact@alibabacloud.com 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.