Javascript drag and drop application instances and javascript Application Instances

Javascript drag and drop application instances and javascript Application Instances

In the previous articles, I also talked about the basic idea of drag-and-drop. The theory is true. What can be done in practice? The following is a small example written using drag-and-drop ideas for your reference. The general results are as follows:

This is a simple drag bar. You can think of it as a scroll bar, a number selection control in a form, a progress bar, and so on, you can change it to a lot of effects that you want, but you don't need to talk about it. Let's see how it works!

After thinking about it, I don't need to talk about the principle. I have already explained it clearly in the drag-and-drop effect. If you are not clear about it, you can turn left and check the small javascript instance, drag on the PC web page, and I will directly paste the Code:

Css:

<style>#drag_wrap{  width:220px;  height:10px;  position:relative;  margin:100px auto;}.dis_bg{  width:200px;  height:10px;  border-radius:10px;  background:#ccc;  margin-left:10px;}#drag_bg{  width:0;  height:10px;  border-radius:10px;  background:#0CF;}#drag_box{  width:20px;  height:20px;  border-radius:10px;  background:#F30;  position:absolute;  top:-5px;  left:0;  cursor:move;}#drag_box span{  width:40px;  height:20px;  text-align:center;  line-height:20px;  border:1px solid #ccc;  position:absolute;  top:-25px;  left:-10px;  color:#333;  background:#fff;}#drag_wrap1{  width:10px;  height:220px;  position:relative;  margin:100px auto;}.dis_bg1{  width:10px;  height:200px;  border-radius:10px;  background:#ccc;  position:absolute;  top:10px;}#drag_bg1{  width:10px;  height:0;  border-radius:10px;  background:#0CF;}#drag_bg1{  width:10px;  height:0;  border-radius:10px;  background:#0CF;}#drag_box1{  width:20px;  height:20px;  border-radius:10px;  background:#F30;  position:absolute;  top:-5px;  left:-5px;  cursor:move;}#drag_box1 span{  width:40px;  height:20px;  text-align:center;  line-height:20px;  border:1px solid #ccc;  position:absolute;  top:0;  left:25px;  color:#333;  background:#fff;}</style>

Html:

<div id="drag_wrap">    <div class="dis_bg">      <div id="drag_bg"></div>    </div>    <div id="drag_box"><span>0</span></div>       </div>  <div id="drag_wrap1">    <div class="dis_bg1">      <div id="drag_bg1"></div>    </div>    <div id="drag_box1"><span>0</span></div>  </div>

JavaScript:

Window. onload = function () {drag ("drag_box", "drag_wrap", "drag_bg", "left"); drag ("drag_box1", "drag_wrap1", "drag_bg1 ", "top"); function drag (obj, parentNode, bgObj, attr, endFn) {var obj = document. getElementById (obj); var parentNode = document. getElementById (parentNode); var bgObj = document. getElementById (bgObj); var oNum = obj. getElementsByTagName ('span ') [0]; obj. onmousedown = function (ev) {var ev = ev | event; // Non-Standard settings Global capture (IE) if (obj. setCapture) {obj. setCapture ()}; var disX = ev. clientX-this. offsetLeft, disY = ev. clientY-this. offsetTop; var oWidth = obj. offsetWidth, oHeight = obj. offsetHeight; var pWidth = parentNode. offsetWidth, pHeight = parentNode. offsetHeight; document. onmousemove = function (ev) {var ev = ev | event; if (attr = "left") {// horizontal var left = ev. clientX-disX; // left if (left <= 0) {left = 0;} else if (left> pWidth-oWidth) {// left = pWidth-oWidth;}; obj. style. left = bgObj. style. width = left + 'px '; oNum. innerHTML = left;} else if (attr = "top") {// vertical var top = ev. clientY-disY; // above if (top <= 0) {top = 0;} else if (top> pHeight-oHeight) {// top = pHeight-oHeight ;}; obj. style. top = bgObj. style. height = top + 'px '; oNum. innerHTML = top ;};}; document. onmouseup = function (ev) {var ev = ev | event; document. onmousemove = document. onmouseup = null; endFn & endFn (); // non-standard release Global capture (IE) if (obj. releaseCapture) {obj. releaseCapture () };}; return false ;};}}

Parameter description:

Five parameters, obj, parentNode, bgObj, attr, and endFn, are provided here:

Obj: dragged object

ParentNode: restrict the objects in the activity area of the dragged object, which is generally set as its parent level.

BgObj: background object of table color when dragging

Attr: left and top parameters, indicating whether to drag horizontally or vertically.

EndFn: returns the function. If yes, it is executed. If no, it is not executed. It is not required.

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:

• JavaScript code sharing for image amplification and drag-and-drop Effects
• How to Implement the drag and drop shifting effect of website menus in JS
• JS achieves webpage Div layer Clone drag effect
• JS achieves beautiful window drag effects (can change the size, maximize, minimize, close)
• Code for JavaScript-implemented 3D drag-and-drop page flip
• JS component Bootstrap Table row dragging implementation code
• JS component Bootstrap Table multi-row drag effect implementation code