介绍 & lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title> & lt;/title>
,& lt; style 类型=拔谋?css"比;
,* {
保证金才能:0;
,,填充:0;
,}
,
,# box {
位置:,才能相对;
,}
,
,# box div {
位置:才能,绝对;
,,宽度:100 px;
,,身高:100 px;
,,这个特性:15 px;
,,text-align:中心;
,,行高:100 px;
,,字体大小:50 px;
,,光标:指针;
,}
,& lt;/style>
& lt;/head>
& lt; body>
,& lt; div id=癰ox"祝辞& lt;/div>
,& lt; script 类型=拔谋?javascript"比;
,//生成结构
,var oDiv =, . getelementbyid (“box");
,var ml =, mt =, 10;
,//行列结构
,(var 小姐:=,0;,小姐:& lt;, 3;,我+ +),{//行
,,(var j =, 0;, j & lt;, 3;, j + +),{//列
var 才能;aDiv =, document.createElement (“div");
oDiv.appendChild才能(aDiv);
时间=aDiv.style.left 才能;j *,(时间+ aDiv.offsetWidth 毫升),+,“px";
aDiv.style.top 才能=,小姐:*,(时间+ aDiv.offsetHeight mt), +,“px";//才能背景颜色随机
aDiv.style.backgroundColor =,才能“rgb (“, +, Math.floor (math . random (), *, 256), +,,,,, +, Math.floor (math . random (), *, 256), +,,,,, +, Math.floor (math . random (), *, 256), +,“),,,//256=(256 - 0 + 1) + 0;
,,}
,}
,//添加文字
,var str =,“ABCDEFGHI";
,var aItems =, oDiv.children;
,(var 小姐:=,0;,小姐:& lt;, str.length;,我+ +),{
aItems才能[我].innerText =, str[我];
,}
,//拖拽
,(var 小姐:=,0;,小姐:& lt;, aItems.length;,我+ +),{
aItems才能[我].onmousedown =,函数(e), {
var 才能;evt =, e | |,事件;
var 才能;x =, evt.offsetX;
var 才能;y =, evt.offsetX;
var 才能;dragNode =,;
var 才能;cloneNode =, dragNode.cloneNode ();
oDiv.replaceChild才能(版本,dragNode);
cloneNode.style.border =,才能“1 px dashed # ccc";
oDiv.appendChild才能(dragNode);
时间=dragNode.style.zIndex 才能;1;
时间=document.onmousemove 才能;函数(e), {
,,var evt =, e | |,事件;
,,var _left =, evt.clientX 作用;x;
,,var _top =, evt.clientY 作用;y;
,,dragNode.style.left =, _left +,“px";
,,dragNode.style.top =, _top +,“px";
,,return 虚假,//选中,文字也会拖动,去除默认行为
,,}
document.onmouseup 才能=,()函数,{
,,var disArr =[];
,,var newArr =[];
,,(var 小姐:=,0;,小姐:& lt;, aItems.length-1;,我+ +),{
,,var disx =, dragNode.offsetLeft 作用;aItems[我].offsetLeft;
,,var disy =, dragNode.offsetTop 作用;aItems[我].offsetTop;
,,var 说=,Math.sqrt (Math.pow (disx, 2), +, Math.pow (disy, 2));
,,,disArr.push (dis);
,,newArr.push (dis);
,,}
,,disArr.sort(函数(a, b), {
,,return a 作用;b;
,,});
,,var minval =, disArr [0];
,,
,,var minIndex =, newArr.indexOf (minval);
,,dragNode.style.left =, aItems [minIndex] .style.left;
,,dragNode.style.top =, aItems [minIndex] .style.top;
,,aItems [minIndex] .style.left =, cloneNode.style.left;
,,aItems [minIndex] .style.top =, cloneNode.style.top;
,,
,,oDiv.removeChild(版本);
,,
,,document.onmousemove =,空;
,,document.onmouseup =,空;
,,}
return 才能;假;
,,}
,}
,& lt;/script>
& lt;/body>
这篇文章将为大家详细讲解有关使用JavaScript怎么实现一个单元格拖拽效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
具体内容如下
关于使用JavaScript怎么实现一个单元格拖拽效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
