[转]用javascript进行拖拽

最新推荐文章于 2023-12-06 11:12:14 发布
最新推荐文章于 2023-12-06 11:12:14 发布
阅读量73 收藏
点赞数
分类专栏： JS-1 文章标签： JavaScript ASP REST prototype 脚本 ViewUI
[url]http://www.blueidea.com/tech/web/2006/3791.asp[/url]
本文译自：[url]http://www.webreference.com/programming/javascript/mk/column2/index.html[/url]所有版权归原文所有

Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．

有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因为你可以很容易的实现！

网页上实现拖拽其实也不是很复杂．第一你需要知道鼠标坐标，第二你需要知道用户鼠标点击一个网页元素并实现拖拽，最后我们要实现移动这个元素． 

<SCRIPT 
      src="/articleimg/2006/07/3791/drag_drop.js" 
      type=text/javascript></SCRIPT>
<STYLE type=text/css>LI {
	MARGIN-BOTTOM: 10px
}
OL {
	MARGIN-TOP: 5px
}
.DragContainer {
	BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
	BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
	BACKGROUND-COLOR: #eee
}
.DragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.DragDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.miniDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
	BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
	BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
	FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ff99cc
}
LEGEND {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial
}
FIELDSET {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
.History {
	FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px
}
#DragContainer8 {
	BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px
}
.miniDragBox {
	FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px
}
PRE {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #f8f8f0
}
</STYLE>
<body>
<FIELDSET id=Demo4><LEGEND>样例- 拖拽页面元素</LEGEND>
      <DIV>
      <DIV class=DragContainer id=DragContainer4 overclass="OverDragContainer">
      <DIV class=DragBox id=Item1 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #1</DIV>
      <DIV class=DragBox id=Item2 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #2</DIV>
      <DIV class=DragBox id=Item3 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #3</DIV>
      <DIV class=DragBox id=Item4 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #4</DIV></DIV>
      <DIV class=DragContainer id=DragContainer5 overclass="OverDragContainer">
      <DIV class=DragBox id=Item5 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #5</DIV>
      <DIV class=DragBox id=Item6 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #6</DIV>
      <DIV class=DragBox id=Item7 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #7</DIV>
      <DIV class=DragBox id=Item8 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #8</DIV></DIV>
      <DIV class=DragContainer id=DragContainer6 overclass="OverDragContainer">
      <DIV class=DragBox id=Item9 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #9</DIV>
      <DIV class=DragBox id=Item10 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #10</DIV>
      <DIV class=DragBox id=Item11 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #11</DIV>
      <DIV class=DragBox id=Item12 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #12</DIV></DIV></DIV></FIELDSET>
</body>
</html>


[b]获取鼠标移动信息:[/b]
第一我们需要获取鼠标的坐标．我们加一个用户函数到document.onmousemove就可以了: 
document.onmousemove = mouseMove;

function mouseMove(ev){
 ev           = ev || window.event;
 var mousePos = mouseCoords(ev);
}

function mouseCoords(ev){
 if(ev.pageX || ev.pageY){
  return {x:ev.pageX, y:ev.pageY};
 }
 return {
  x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
  y:ev.clientY + document.body.scrollTop  - document.body.clientTop
 };
}


<script>

function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
		document.getElementById('xxx').value = mousePos.x;
		document.getElementById('yyy').value = mousePos.y;
}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

document.onmousemove = mouseMove;
</script>Mouse X Position:
<input id=xxx type=text>
<br>Mouse Y Position:
<input id=yyy type=text>

</body>
</html>


[b]全部脚本[/b] 
<STYLE>LI {
	MARGIN-BOTTOM: 10px
}
OL {
	MARGIN-TOP: 5px
}
.DragContainer {
	BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
	BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
	BACKGROUND-COLOR: #eee
}
.DragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.DragDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.miniDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
	BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
	BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
	FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ff99cc
}
LEGEND {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial
}
FIELDSET {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
.History {
	FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px
}
#DragContainer8 {
	BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px
}
.miniDragBox {
	FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px
}
pre{border:1 solid #CCC;background-color:#F8F8F0;padding:10px;}
</STYLE>


<script>

// iMouseDown represents the current mouse button state: up or down
/*
lMouseState represents the previous mouse button state so that we can
check for button clicks and button releases:

if(iMouseDown && !lMouseState) // button just clicked!
if(!iMouseDown && lMouseState) // button just released!
*/
var mouseOffset = null;
var iMouseDown  = false;
var lMouseState = false;
var dragObject  = null;

// Demo 0 variables
var DragDrops   = [];
var curTarget   = null;
var lastTarget  = null;
var dragHelper  = null;
var tempDiv     = null;
var rootParent  = null;
var rootSibling = null;

Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

function CreateDragContainer(){
	/*
	Create a new "Container Instance" so that items from one "Set" can not
	be dragged into items from another "Set"
	*/
	var cDrag        = DragDrops.length;
	DragDrops[cDrag] = [];

	/*
	Each item passed to this function should be a "container".  Store each
	of these items in our current container
	*/
	for(var i=0; i<arguments.length; i++){
		var cObj = arguments[i];
		DragDrops[cDrag].push(cObj);
		cObj.setAttribute('DropObj', cDrag);

		/*
		Every top level item in these containers should be draggable.  Do this
		by setting the DragObj attribute on each item and then later checking
		this attribute in the mouseMove function
		*/
		for(var j=0; j<cObj.childNodes.length; j++){

			// Firefox puts in lots of #text nodes...skip these
			if(cObj.childNodes[j].nodeName=='#text') continue;

			cObj.childNodes[j].setAttribute('DragObj', cDrag);
		}
	}
}


function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

function getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}


function getPosition(e){
	var left = 0;
	var top  = 0;
	while (e.offsetParent){
		left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
		top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
		e     = e.offsetParent;
	}

	left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
	top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

	return {x:left, y:top};

}


function mouseMove(ev){
	ev         = ev || window.event;

	/*
	We are setting target to whatever item the mouse is currently on

	Firefox uses event.target here, MSIE uses event.srcElement
	*/
	var target   = ev.target || ev.srcElement;
	var mousePos = mouseCoords(ev);

	// mouseOut event - fires if the item the mouse is on has changed
	if(lastTarget && (target!==lastTarget)){
		// reset the classname for the target element
		var origClass = lastTarget.getAttribute('origClass');
		if(origClass) lastTarget.className = origClass;
	}

	/*
	dragObj is the grouping our item is in (set from the createDragContainer function).
	if the item is not in a grouping we ignore it since it can't be dragged with this
	script.
	*/
	var dragObj = target.getAttribute('DragObj');

	 // if the mouse was moved over an element that is draggable
	if(dragObj!=null){

		// mouseOver event - Change the item's class if necessary
		if(target!=lastTarget){
			var oClass = target.getAttribute('overClass');
			if(oClass){
				target.setAttribute('origClass', target.className);
				target.className = oClass;
			}
		}

		// if the user is just starting to drag the element
		if(iMouseDown && !lMouseState){
			// mouseDown target
			curTarget     = target;

			// Record the mouse x and y offset for the element
			rootParent    = curTarget.parentNode;
			rootSibling   = curTarget.nextSibling;

			mouseOffset   = getMouseOffset(target, ev);

			// We remove anything that is in our dragHelper DIV so we can put a new item in it.
			for(var i=0; i<dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]);

			// Make a copy of the current item and put it in our drag helper.
			dragHelper.appendChild(curTarget.cloneNode(true));
			dragHelper.style.display = 'block';

			// set the class on our helper DIV if necessary
			var dragClass = curTarget.getAttribute('dragClass');
			if(dragClass){
				dragHelper.firstChild.className = dragClass;
			}

			// disable dragging from our helper DIV (it's already being dragged)
			dragHelper.firstChild.removeAttribute('DragObj');

			/*
			Record the current position of all drag/drop targets related
			to the element.  We do this here so that we do not have to do
			it on the general mouse move event which fires when the mouse
			moves even 1 pixel.  If we don't do this here the script
			would run much slower.
			*/
			var dragConts = DragDrops[dragObj];

			/*
			first record the width/height of our drag item.  Then hide it since
			it is going to (potentially) be moved out of its parent.
			*/
			curTarget.setAttribute('startWidth',  parseInt(curTarget.offsetWidth));
			curTarget.setAttribute('startHeight', parseInt(curTarget.offsetHeight));
			curTarget.style.display  = 'none';

			// loop through each possible drop container
			for(var i=0; i<dragConts.length; i++){
				with(dragConts[i]){
					var pos = getPosition(dragConts[i]);

					/*
					save the width, height and position of each container.

					Even though we are saving the width and height of each
					container back to the container this is much faster because
					we are saving the number and do not have to run through
					any calculations again.  Also, offsetHeight and offsetWidth
					are both fairly slow.  You would never normally notice any
					performance hit from these two functions but our code is
					going to be running hundreds of times each second so every
					little bit helps!

					Note that the biggest performance gain here, by far, comes
					from not having to run through the getPosition function
					hundreds of times.
					*/
					setAttribute('startWidth',  parseInt(offsetWidth));
					setAttribute('startHeight', parseInt(offsetHeight));
					setAttribute('startLeft',   pos.x);
					setAttribute('startTop',    pos.y);
				}

				// loop through each child element of each container
				for(var j=0; j<dragConts[i].childNodes.length; j++){
					with(dragConts[i].childNodes[j]){
						if((nodeName=='#text') || (dragConts[i].childNodes[j]==curTarget)) continue;

						var pos = getPosition(dragConts[i].childNodes[j]);

						// save the width, height and position of each element
						setAttribute('startWidth',  parseInt(offsetWidth));
						setAttribute('startHeight', parseInt(offsetHeight));
						setAttribute('startLeft',   pos.x);
						setAttribute('startTop',    pos.y);
					}
				}
			}
		}
	}

	// If we get in here we are dragging something
	if(curTarget){
		// move our helper div to wherever the mouse is (adjusted by mouseOffset)
		dragHelper.style.top  = mousePos.y - mouseOffset.y;
		dragHelper.style.left = mousePos.x - mouseOffset.x;

		var dragConts  = DragDrops[curTarget.getAttribute('DragObj')];
		var activeCont = null;

		var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) /2);
		var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight'))/2);

		// check each drop container to see if our target object is "inside" the container
		for(var i=0; i<dragConts.length; i++){
			with(dragConts[i]){
				if(((getAttribute('startLeft'))                               < xPos) &&
					((getAttribute('startTop'))                                < yPos) &&
					((getAttribute('startLeft') + getAttribute('startWidth'))  > xPos) &&
					((getAttribute('startTop')  + getAttribute('startHeight')) > yPos)){

						/*
						our target is inside of our container so save the container into
						the activeCont variable and then exit the loop since we no longer
						need to check the rest of the containers
						*/
						activeCont = dragConts[i];

						// exit the for loop
						break;
				}
			}
		}

		// Our target object is in one of our containers.  Check to see where our div belongs
		if(activeCont){
			// beforeNode will hold the first node AFTER where our div belongs
			var beforeNode = null;

			// loop through each child node (skipping text nodes).
			for(var i=activeCont.childNodes.length-1; i>=0; i--){
				with(activeCont.childNodes[i]){
					if(nodeName=='#text') continue;

					// if the current item is "After" the item being dragged
					if(
						curTarget != activeCont.childNodes[i]                              &&
						((getAttribute('startLeft') + getAttribute('startWidth'))  > xPos) &&
						((getAttribute('startTop')  + getAttribute('startHeight')) > yPos)){
							beforeNode = activeCont.childNodes[i];
					}
				}
			}

			// the item being dragged belongs before another item
			if(beforeNode){
				if(beforeNode!=curTarget.nextSibling){
					activeCont.insertBefore(curTarget, beforeNode);
				}

			// the item being dragged belongs at the end of the current container
			} else {
				if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){
					activeCont.appendChild(curTarget);
				}
			}

			// make our drag item visible
			if(curTarget.style.display!=''){
				curTarget.style.display  = '';
			}
		} else {

			// our drag item is not in a container, so hide it.
			if(curTarget.style.display!='none'){
				curTarget.style.display  = 'none';
			}
		}
	}

	// track the current mouse state so we can compare against it next time
	lMouseState = iMouseDown;

	// mouseMove target
	lastTarget  = target;

	// track the current mouse state so we can compare against it next time
	lMouseState = iMouseDown;

	// this helps prevent items on the page from being highlighted while dragging
	return false;
}

function mouseUp(ev){
	if(curTarget){
		// hide our helper object - it is no longer needed
		dragHelper.style.display = 'none';

		// if the drag item is invisible put it back where it was before moving it
		if(curTarget.style.display == 'none'){
			if(rootSibling){
				rootParent.insertBefore(curTarget, rootSibling);
			} else {
				rootParent.appendChild(curTarget);
			}
		}

		// make sure the drag item is visible
		curTarget.style.display = '';
	}
	curTarget  = null;
	iMouseDown = false;
}

function mouseDown(){
	iMouseDown = true;
	if(lastTarget){
		return false;
	}
}

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;

window.onload = function(){
	// Create our helper object that will show the item while dragging
	dragHelper = document.createElement('DIV');
	dragHelper.style.cssText = 'position:absolute;display:none;';

	CreateDragContainer(
		document.getElementById('DragContainer1'),
		document.getElementById('DragContainer2'),
		document.getElementById('DragContainer3')
	);

	document.body.appendChild(dragHelper);
}

</script>

<!--the mouse over and dragging class are defined on each item-->

<div class="DragContainer" id="DragContainer1">
	<div class="DragBox" id="Item1"  overClass="OverDragBox" dragClass="DragDragBox">Item #1</div>
	<div class="DragBox" id="Item2"  overClass="OverDragBox" dragClass="DragDragBox">Item #2</div>
	<div class="DragBox" id="Item3"  overClass="OverDragBox" dragClass="DragDragBox">Item #3</div>
	<div class="DragBox" id="Item4"  overClass="OverDragBox" dragClass="DragDragBox">Item #4</div>
</div>
<div class="DragContainer" id="DragContainer2">
	<div class="DragBox" id="Item5"  overClass="OverDragBox" dragClass="DragDragBox">Item #5</div>
	<div class="DragBox" id="Item6"  overClass="OverDragBox" dragClass="DragDragBox">Item #6</div>
	<div class="DragBox" id="Item7"  overClass="OverDragBox" dragClass="DragDragBox">Item #7</div>
	<div class="DragBox" id="Item8"  overClass="OverDragBox" dragClass="DragDragBox">Item #8</div>
</div>
<div class="DragContainer" id="DragContainer3">
	<div class="DragBox" id="Item9"  overClass="OverDragBox" dragClass="DragDragBox">Item #9</div>
	<div class="DragBox" id="Item10" overClass="OverDragBox" dragClass="DragDragBox">Item #10</div>
	<div class="DragBox" id="Item11" overClass="OverDragBox" dragClass="DragDragBox">Item #11</div>
	<div class="DragBox" id="Item12" overClass="OverDragBox" dragClass="DragDragBox
iteye_1458
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
怎么用javascript进行拖拽2
12-11
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]你会注意到这个代码几乎是前面的全集，将前面的合在一起就实现了拖拽效果了． 当我们点击一个item时，我们就获取了很多变量，如鼠标位置，鼠标位置自然就包含了那个...
Javascript实现拖拽效果
qq_61716556的博客
05-09 935
我们执行拖拽操作时， 1.按住某元素 2.移动鼠标 3.移动鼠标到相应位置后松开鼠标 基于以上操作，页面拖拽效果需要三个事件 onmousedown onmousemove onmouseup 在onmousedown事件中，我们需要定义函数表明，该元素被按住，即将进行移动操作，需要计算x坐标值，并触发后续的onmousemove事件。 在onmousemove事件中，我们需要计算元素坐标位置，根据鼠标移动改变元素位置，准备执行鼠标松开时的事件函数。 在onmouseup事件中，我们需要以
javaScript使用拖拽Api 开发dom全屏随意拖动
weixin_43827751的博客
12-06 72
【代码】javaScript使用拖拽Api 开发dom全屏随意拖动。
js实现鼠标拖动元素进行旋转
LSY_5201314的博客
06-14 1094
js实现元素旋转，元素旋转，js拖动元素旋转
javaScript drag对象进行拖拽使用详解
02-18 1310
目录 drag简介 兼容性 drag事件 拖拽流程 DataTransfer对象 drag拖放桌面文件 drag实例 小结 drag简介 HMTL5提供的支持原生拖拽的实现 兼容性如何？ 桌面端的支持比较好，移动端的支持还是比较差 拖拽流程 1.设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽(文本、图片和链接是默认可以拖放的，它们的draggable属...
原生JavaScript元素拖拽缩放
weixin_44815800的博客
04-08 257
使用JS实现的div拖拽效果，也可封装成vue指令
JavaScript的拖拽事件。
weixin_43228946的博客
08-21 682
在浏览器可以随意的拖拽，我们来看下怎么实现？ 我们具体分析一下步骤： 第一步：鼠标选中需要拖拽的地方，鼠标按下。（需要使用事件onmousedown） 第二步：鼠标按下后，我们接着移动鼠标。（onmousemove） 第三步：鼠标松开，将拖拽的元素固定在那，也就是拖到就到哪。（onmouseup） 现在我们具体看下代码：
JavaScript拖拽
码上暴富
09-18 140
JavaScript拖拽JavaScript拖拽设置元素为可拖放拖动什么 - ondragstart 和 setData()放到何处 - ondragover进行放置 - ondrop JavaScript拖拽 写一个vue指令，原理就是使用blob实现下载 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten
怎么用javascript进行拖拽
dingbake2529的博客
04-05 63
Java的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽． 有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗...
JavaScript实现拖动方框
qq_53972864的博客
11-20 158
JavaScript实现拖动方框
javascript实现鼠标拖拽效果
关于光在阳光下被反射的博客
09-09 185
js实现鼠标拖拽界面元素的效果，并拖拽到当前位置
JavaScript实现可拖拽的拖动层Div实例
10-23
主要介绍了JavaScript实现可拖拽的拖动层Div的方法,拖拽页面中的div块可实现div块按照拖动轨迹移动的效果,涉及javascript鼠标事件、页面元素样式结合事件函数动态操作的相关技巧,需要的朋友可以参考下
怎么用javascript进行拖拽第1/2页
12-10
例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因
JavaScript 拖拽翻页效果代码
10-29
拖动翻页代码，很多人都想拥有这样一个功能，现在于JavaScript配合CSS终于实现了，个人感觉真的很不错，按住鼠标左键向某一方向拖动即可完成分页动作，符合WEB标准，兼容多浏览器。
用javascript做拖动布局的思路
10-30
几天不是很忙，就找了些拖动布局方面的资料看看，也学着写了个拖动布局的效果，没想到花了好多时间，七拼八凑，总算是把这个效果写出来了。哎！还是js的功夫太差。因为是边找资料边写的，很多地方印象不深，时间一长...
华为OD机试D卷 - 用连续自然数之和来表达整数 - 免费看解析和代码.html
05-10
私信博主免费获取真题解析以及代码
Screenshot_2024-05-10-20-21-01-857_com.chaoxing.mobile.jpg
05-10
Screenshot_2024-05-10-20-21-01-857_com.chaoxing.mobile.jpg
数字图像处理｜Matlab-频域增强实验-彩色图像的频域滤波.zip
最新发布
05-10
数字图像处理｜Matlab-频域增强实验-彩色图像的频域滤波.zip
2024-2030中国定向转向膜市场现状研究分析与发展前景预测报告.docx
05-10
2024-2030中国定向转向膜市场现状研究分析与发展前景预测报告
用JavaScript实现一个可以拖动的元素
04-01
以下是一个简单的实现可以拖动的元素的 JavaScript 代码： HTML: ```html 我可以被拖动 ``` CSS: ```css #myElement { width: 200px; height: 200px; background-color: blue; color: white; text-align: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值