Home > Others

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

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
div and mod calculator mod and div calculator comptia a 220 901 and 220 902 pdf free download drive a sm a a answers att a

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More