javascript DIV上下拖放功能
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript DIV上下拖放功能相关的知识，希望对你有一定的参考价值。
DIV上下拖放功能
按住“托”实现Y轴拖动
可以参考 http://js.alixixi.com/a/2010091564663.shtml
<div id="ab">
<div ><span ondrag="" onmousedown="">托</span><span> 123456789</span></div>
<div ><span ondrag="" onmousedown="">托</span><span> 123456789</span></div>
<div ><span ondrag="" onmousedown="">托</span><span> 123456789</span></div>
<div ><span ondrag="" onmousedown="">托</span><span> 123456789</span></div>
<div ><span ondrag="" onmousedown="">托</span><span> 123456789</span></div>
<div ><span ondrag="" onmousedown="">托</span><span> 123456789</span></div>
</div>
大哥们我是菜鸟！！！能否发个直接能运行的呀！！谢谢！！！
[jQuery] 两个ul之间li元素的拖拉和排序 HTML代码：
<span class="left">
<b>one</b>
<ul id="list1" style="background-color:#ffee00" name="offJob">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</span>
<span class="left">
<b>two</b>
<ul id="list2" style="background-color:#ffee00" name="onJob">
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
</span>
jQuery代码：
$(function()
$("#list1, #list2").dragsort(
dragBetween: true
);
);
需要包含的js文件内容：
(function($)
$.fn.dragsort = function(options)
var opts = $.extend(, $.fn.dragsort.defaults, options);
var lists = new Array();
var list = null, lastPos = null;
this.each(function(i, cont)
var newList =
draggedItem: null,
placeHolderItem: null,
pos: null,
offset: null,
offsetLimit: null,
container: cont,
init: function()
$(this.container).attr("listIdx", i).find(opts.dragSelector).css("cursor", "pointer").mousedown(this.grabItem);
,
grabItem: function(e)
if (e.button == 2)
return;
if (list != null && list.draggedItem != null)
list.dropItem();
$(this).css("cursor", "move");
list = lists[$(this).parents("*[listIdx]").attr("listIdx")];
list.draggedItem = $(this).is(opts.itemSelector) ? $(this) : $(this).parents(opts.itemSelector);
list.offset = list.draggedItem.offset();
list.offset.top = e.pageY - list.offset.top;
list.offset.left = e.pageX - list.offset.left;
var containerHeight = $(list.container).outerHeight() == 0 ?Math.max(1, Math.round(0.5 +$(list.container).find(opts.itemSelector).size() *list.draggedItem.outerWidth() / $(list.container).outerWidth())) *list.draggedItem.outerHeight() : $(list.container).outerHeight();
list.offsetLimit = $(list.container).offset();
list.offsetLimit.right = list.offsetLimit.left + $(list.container).outerWidth() - list.draggedItem.outerWidth();
list.offsetLimit.bottom = list.offsetLimit.top + containerHeight - list.draggedItem.outerHeight();
list.placeHolderItem =list.draggedItem.clone().html(" ").css( visibility: "hidden",height: list.draggedItem.height() ).attr("placeHolder", true);
list.draggedItem.after(list.placeHolderItem);
list.draggedItem.css( position: "absolute", opacity: 0.8 );
$(lists).each(function(i, l) l.ensureNotEmpty(); l.buildPositionTable(); );
list.setPos(e.pageX, e.pageY);
$(document).bind("selectstart", list.stopBubble); //stop ie text selection
$(document).bind("mousemove", list.swapItems);
$(document).bind("mouseup", list.dropItem);
return false; //stop moz text selection
,
setPos: function(x, y)
var top = y - this.offset.top;
var left = x - this.offset.left;
if (!opts.dragBetween)
top = Math.min(this.offsetLimit.bottom, Math.max(top, this.offsetLimit.top));
left = Math.min(this.offsetLimit.right, Math.max(left, this.offsetLimit.left));
this.draggedItem.css( top: top, left: left );
,
buildPositionTable: function()
var item = this.draggedItem == null ? null : this.draggedItem.get(0);
var pos = new Array();
$(this.container).find(opts.itemSelector).each(function(i, elm)
if (elm != item)
var loc = $(elm).offset();
loc.right = loc.left + $(elm).width();
loc.bottom = loc.top + $(elm).height();
loc.elm = elm;
pos.push(loc);
);
this.pos = pos;
,
dropItem: function()
if (list.draggedItem == null)
return;
$(list.container).find(opts.dragSelector).css("cursor", "pointer");
list.placeHolderItem.before(list.draggedItem);
list.draggedItem.css( position: "", top: "", left: "", opacity: "" );
list.placeHolderItem.remove();
$("*[emptyPlaceHolder]").remove();
opts.dragEnd.apply(list.draggedItem);
list.draggedItem = null;
$(document).unbind("selectstart", list.stopBubble);
$(document).unbind("mousemove", list.swapItems);
$(document).unbind("mouseup", list.dropItem);
return false;
,
stopBubble: function() return false; ,
swapItems: function(e)
if (list.draggedItem == null)
return false;
list.setPos(e.pageX, e.pageY);
var ei = list.findPos(e.pageX, e.pageY);
var nlist = list;
for (var i = 0; ei == -1 && opts.dragBetween && i < lists.length; i++)
ei = lists[i].findPos(e.pageX, e.pageY);
nlist = lists[i];
if (ei == -1 || $(nlist.pos[ei].elm).attr("placeHolder"))
return false;
if (lastPos == null || lastPos.top > list.draggedItem.offset().top || lastPos.left > list.draggedItem.offset().left)
$(nlist.pos[ei].elm).before(list.placeHolderItem);
else
$(nlist.pos[ei].elm).after(list.placeHolderItem);
$(lists).each(function(i, l) l.ensureNotEmpty(); l.buildPositionTable(); );
lastPos = list.draggedItem.offset();
return false;
,
findPos: function(x, y)
for (var i = 0; i < this.pos.length; i++)
if (this.pos[i].left < x && this.pos[i].right > x&& this.pos[i].top < y && this.pos[i].bottom > y)
return i;
return -1;
,
ensureNotEmpty: function()
if (!opts.dragBetween)
return;
var item = this.draggedItem == null ? null : this.draggedItem.get(0);
var emptyPH = null, empty = true;
$(this.container).find(opts.itemSelector).each(function(i, elm)
if ($(elm).attr("emptyPlaceHolder"))
emptyPH = elm;
else if (elm != item)
empty = false;
);
if (empty && emptyPH == null)
$(this.container).append(list.placeHolderItem.clone().removeAttr("placeHolder").attr("emptyPlaceHolder", true));
else if (!empty && emptyPH != null)
$(emptyPH).remove();
;
newList.init();
lists.push(newList);
);
return this;
;
$.fn.dragsort.defaults =
itemSelector: "li",
dragSelector: "li",
dragEnd: function() ,
dragBetween: false
;
)(jQuery); 参考技术A 他们的不行的话，找我。
jquery有这个功能。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#draggable width: 100px; height: 70px; background: silver;
</style>
<script>
$(document).ready(function()
//$("div[name=spanFor]").draggable();
$("div[name=spanFor]").draggable(axis:'y');
);
</script>
</head>
<body >
<div id="ab">
<div name="spanFor" ><span ondrag="" onmousedown="">托</span><span> 123456789</span></div>
<div name="spanFor"><span ondrag="" onmousedown="">托</span><span> 123456789</span></div>
<div name="spanFor"><span ondrag="" onmousedown="">托</span><span> 123456789</span></div>
<div name="spanFor"><span ondrag="" onmousedown="">托</span><span> 123456789</span></div>
<div name="spanFor"><span ondrag="" onmousedown="">托</span><span> 123456789</span></div>
<div name="spanFor"><span ondrag="" onmousedown="">托</span><span> 123456789</span></div>
</div>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
这2个可以下载到本地，下载方法就是把src中的地址复制到浏览器的网址输入框内。本回答被提问者采纳 参考技术B http://dragsort.codeplex.com/
直接用这个插件吧。。jquery的，方便也实用 参考技术C <script>
function drag(o,s)
if (typeof o == 'string') o = document.getElementById(o);
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
o.orig_index = o.style.zIndex;
o.onmousedown = function(a)
this.style.cursor = 'move';
this.style.zIndex = 10000;
var d=document;
if(!a)a=window.event;
var x = a.clientX+d.body.scrollLeft-o.offsetLeft;
var y = a.clientY+d.body.scrollTop-o.offsetTop;
d.ondragstart = 'return false;'
d.onselectstart = 'return false;'
d.onselect = 'document.selection.empty();'
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove = function(a)
if(!a)a=window.event;
o.style.left = a.clientX+document.body.scrollLeft-x;
o.style.top = a.clientY+document.body.scrollTop-y;
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
d.onmouseup = function()
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove = null;
d.onmouseup = null;
d.ondragstart = null;
d.onselectstart = null;
d.onselect = null;
o.style.cursor = 'normal';
o.style.zIndex = o.orig_index;
if (s)
var orig_scroll = window.onscroll?window.onscroll:function ();
window.onscroll = function ()
orig_scroll();
o.style.left = o.orig_x + document.body.scrollLeft;
o.style.top = o.orig_y + document.body.scrollTop;
</script>
然后你的每个div加个id，代码的最下面加上drag(obj [,scroll]);这个方法更简单，可以随意添加div，只要有id就能拖动 参考技术D 人家单元格都能移，你div，不一样能移？
举一反三啊。。要想学会，就把人家的js代码看看懂，不懂的就baidu，这样才能学的更多啊
跨页面拖放div？
【中文标题】跨页面拖放div？【英文标题】：Drag and drop divs across page? 【发布时间】：2012-06-02 22:02:23 【问题描述】：我正在构建一个单独的页面，该页面由左侧的（div 的）列表和右侧的（div 的）网格组成。我想添加用户单击并拖动列表项之一并将其放在其中一个网格框上的功能。我没有使用 HTML5，但我知道它具有这种本机功能。我目前正在尝试避免使用 HTML 5。
上图显示了我的基本页面布局，红线显示了如何拖放。任何列表项都可以拖动到任何网格框中。网格单元是动态调整大小的（调整页面大小将调整网格单元的大小）到任何给定时间所有内容都始终适合页面的位置，没有滚动条。每个网格单元都有一个从 0 开始的索引，从左到右然后从上到下计数。我需要将列表项 ID（可以是任何数字）与其对应的网格单元索引（在本例中为 0-8）配对。
我什至不知道要使这种拖放成为可能，我需要做的第一件事。我只知道 HTML 的核心基础知识——所以我需要一些示例来演示这一点，而不仅仅是对使用这个和那个的一些简要说明，因为我不知道这个和那个意味着什么。我能找到的所有教程都与 HTML 5 相关，或者与仅在同一个列表中移动列表项相关 - 但在我的情况下，我需要将其移到列表之外。
这是我在下面使用的页面结构。请注意，列表项是在页面加载时动态添加的...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>View Cameras</title>
<script type="text/javascript" language="javascript">
var selIndex = 0;
var lastListIndex = 0;
function selBox(index)
document.getElementById('b' + selIndex).style.backgroundColor = "Black";
selIndex = index;
document.getElementById('b' + selIndex).style.backgroundColor = "Blue";
function pageload()
AddListItem('rtsp://192.168.1.1', 'Test Item 1');
AddListItem('rtsp://192.168.1.2', 'Test Item 2');
AddListItem('rtsp://192.168.1.3', 'Test Item 3');
selBox(0);
camload('');
selBox(1);
camload('');
selBox(2);
camload('');
selBox(3);
camload('');
selBox(4);
camload('');
selBox(5);
camload('');
selBox(6);
camload('');
selBox(7);
camload('');
selBox(8);
camload('');
selBox(0);
function AddListItem(address, caption)
lastListIndex += 1;
var i = lastListIndex;
var h = '<div id="camlistitem' + i + '" class="camlistitem" onclick="camload(\''+address+'\')">';
h += caption;
h += '</div>';
document.getElementById('divCamList').innerHTML += h;
function camload(addr)
var h = '';
if (addr == '')
h = '<div style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">';
h += ' <img src="Cam.jpg" style="width: 100px; height: 80px;" ';
h += '</div>';
else
h = '<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" ';
h += 'id="player'+selIndex+'" events="True" style="width: 100%; height: 100%;">';
h += '<param name="Src" value="' + addr + '" />';
h += '<param name="ShowDisplay" value="True" />';
h += '<param name="AutoLoop" value="False" />';
h += '<param name="AutoPlay" value="True" />';
h += '<embed id="vcl' + selIndex + '" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" ';
h += 'autoplay="yes" loop="no" target="' + addr + '" style="width: 100%; height: 100%;"></embed></OBJECT>';
document.getElementById('divContent' + selIndex).innerHTML = h;
</script>
<style type="text/css">
body
height: 100%;
* margin: 0px; border: 0px; padding: 0px;
h3
font-size: 14px;
font-weight: bold;
div.title
height: 40px;
box-sizing: border-box;
overflow: hidden;
div.main
height: 100%;
div.contentmain
top: 40px;
bottom: 0;
left: 250px;
right: 0;
overflow: hidden;
position: absolute;
div.side
top: 40px;
bottom: 0;
width: 250px;
position: absolute;
background: lightgrey;
.matrix
display: table;
width: 100%;
height: 100%;
.row
display: table-row;
div.contentbox
display: table-cell;
width: 33%;
table.selecttable
width: 200px;
height: 100%;
td.selecttable
text-align: center;
cursor: pointer;
color: White;
div.camlist
div.camlistitem
background-color: Navy;
color: White;
cursor: pointer;
margin-top: 1px;
padding-left: 5px;
div.camlistitem:hover
background-color: Blue;
</style>
</head>
<body onload="pageload()">
<div id="divTitle" class="title">
<h1>View Cameras</h1>
</div>
<div id="divMain" class="main">
<div class="side">
<h3>1) Click box to select view:</h3>
<div style="position: relative; float: left; width: 100%;">
<table class="selecttable" border="1px">
<tr>
<td class="selecttable" id="b0" onclick="selBox(0);" style="background-color: Black;">0<br /></td>
<td class="selecttable" id="b1" onclick="selBox(1);" style="background-color: Black;">1<br /></td>
<td class="selecttable" id="b2" onclick="selBox(2);" style="background-color: Black;">2<br /></td>
</tr>
<tr>
<td class="selecttable" id="b3" onclick="selBox(3);" style="background-color: Black;">3<br /></td>
<td class="selecttable" id="b4" onclick="selBox(4);" style="background-color: Black;">4<br /></td>
<td class="selecttable" id="b5" onclick="selBox(5);" style="background-color: Black;">5<br /></td>
</tr>
<tr>
<td class="selecttable" id="b6" onclick="selBox(6);" style="background-color: Black;">6<br /></td>
<td class="selecttable" id="b7" onclick="selBox(7);" style="background-color: Black;">7<br /></td>
<td class="selecttable" id="b8" onclick="selBox(8);" style="background-color: Black;">8<br /></td>
</tr>
</table>
</div>
<h3>2) Select cam to show in selected box:</h3>
<div style="position: relative; float: left; width: 100%;">
<div id="divCamList" class="camlist">
<div id="camlistitem0" class="camlistitem" onclick="camload('')">
[No Camera]
</div>
</div>
</div>
<h3>3) Can't see the cameras? <a href="http://www.videolan.org/vlc/">Click Here.</a></h3>
</div>
<div class="contentmain">
<div class="matrix">
<div class="row">
<div class="contentbox" id="divContent0"></div>
<div class="contentbox" id="divContent1"></div>
<div class="contentbox" id="divContent2"></div>
</div>
<div class="row">
<div class="contentbox" id="divContent3"></div>
<div class="contentbox" id="divContent4"></div>
<div class="contentbox" id="divContent5"></div>
</div>
<div class="row">
<div class="contentbox" id="divContent6"></div>
<div class="contentbox" id="divContent7"></div>
<div class="contentbox" id="divContent8"></div>
</div>
</div>
</div>
</div>
</body>
</html>
PS-会有缺图Cam.jpg
更新
感谢roflmao 对以下答案的帮助，我现在一切正常。只是一个小故障，当我拖动一个项目时，它会突出显示页面上的所有内容，但这是另一个故事。
【问题讨论】：
jquery 不适合你吗？ jqueryui.com/demos/draggable 【参考方案1】：好的，所以你要做的第一件事就是使用 javascript 库，jQuery 或 Prototype（jQuery 是更流行的库）。以你的方式操作标准 JS 是在乞求跨浏览器兼容性问题。
一旦您安装了 jQuery，您就可以使用 jQuery UI 库并使用可拖放界面。签出this page。
代码将如下所示： http://jsfiddle.net/CZNhP/21/
$(function()
$("#menu li").draggable(reset: true);
$("#container").droppable(
drop: function(event, ui)
// Here you instantiate your media object.
// You can access the place your object was dropped on with
// "this" and the draggged item with "ui.draggable"
);
);
【讨论】：
+1 跨浏览器兼容性的优点，因为 IE 拒绝遵循任何通用标准。 原始代码有问题，抱歉。查看 js fiddle 修订版 21。这是一个很好的版本。 提出了关于拖动时突出显示的新问题：***.com/questions/10788517/…以上是关于javascript DIV上下拖放功能的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 JavaScript 从头开始实现拖放 div？