拖拽式编程PHP,纯JS实现可拖拽表单的简单实例

因为要用到可拖拽表单，个人要比较喜欢自己动手，不怎么喜欢在不懂实现或者原理的情况下用插件，所以查找资料实现了一个。

思路：放入：用mousedown判断鼠标点击的位置是否在触发控件的位置，如果是，mousemove的时候clone一个控件，修改透明度，然后放入容器内的时候remove这个控件，并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样)

拖拽：同样的， mousedown的时候判断是哪个控件，mousemove的时候需要放一个占位div放在原有的位置上，并将元素修改透明度然后设置为绝对定位方便拖动，在进行拖动的时候，占位div也会跟着鼠标位置进行改变(判断当前鼠标位置是否是容器内控件的左上角加上控件高度的一半)，放下的时候进行判断占位div的位置进行插入。具体看代码吧，这个思路加上的时间距离代码实现的时间有点久远了，所有可能不是很准确，但是大概的思路就是这样了。

ps：要用到拖拽表单功能的，基本上可能都会要更改以往设计数据库方式，这里可以提供给你们一个搜索关键词 表的纵向存储

注释基本上都已经写的很详细了，直接上代码吧。

有什么问题请大神们多多指教

Test

html,body

{

height:100%;

width:100%;

padding:0;

margin:0;

}

.dialog

{

/* width:250px;

height:250px;*/

position:absolute;

background-color:#ccc;

-webkit-box-shadow:1px 1px 3px #292929;

-moz-box-shadow:1px 1px 3px #292929;

box-shadow:1px 1px 3px #292929;

/*margin:10px;*/

top:50px;

left: 50px;

opacity:1;

}

.dialog-title

{

color:#fff;

background-color:#404040;

font-size:12pt;

font-weight:bold;

padding:4px 6px;

cursor:move;

position:absolute;

top:50px;

left: 50px;

}

.dialog-content

{

padding:4px;

cursor:move;

}

.none{

display: none;

}

.box{

width: 200px;

height: 500px;

background-color: gray;

line-height: 30px;

margin: 100px;

}

.place{

width: 200px;

height: 50px;

border: 1px dashed red;

}

Dialog

Dialog

123

//要传入的变量

//点击触发的对象

var click = document.getElementById("title");

var click2 = document.getElementById("title2");

//放入的容器

var box = document.getElementById("box");

//容器内占位的DIV

var place = document.createElement("div");

place.className = "place";

//往容器内添加的对象

var create = document.createElement("input");

create.type = "text";

var create2 = document.createElement("input");

create2.type = "password";

//是否可以添加多个

var isMany = true;

createWin(click,create,isMany,place,box);

createWin(click2,create2,isMany,place,box);

/**

* author:lzh

* 作用:可拖拽排序表单实现

* 参数:oclick 点击触发事件的对象

* ocreate 出发后在表单中传入的对象

* bisMany 单个oclick对象是否可拖入多个ocreate对象

* oplace 拖入时占位div对象

* obox 拖入的容器，不填则默认为body

*/

function createWin(oclick,ocreate,bisMany,oplace,obox=document.body)

{

//是否点击了触发对象

var isClick = false;

//触发对象是否为容器内的元素

var isIncludeBox = false;

oplace.style.width = obox.offsetWidth-5 + "px";

oplace.style.height = oclick.offsetHeight-5 + "px";

//移动效果的临时元素

var oclickClone;

var oclickDown;

//计算偏移量

var diffObj;

var diffX;

var diffY;

var tmp;

var omove_position;

//点是否包含在容器内

function isInclude(x,y,includeBox=obox)

{

if(x > includeBox.offsetLeft

&& y > includeBox.offsetTop

&& x < includeBox.offsetLeft + includeBox.offsetWidth

&& y < includeBox.offsetTop + includeBox.offsetHeight)

return true;

return false;

}

//移动效果函数

function moveMagic(omove,e)

{

// omove_position = window.getComputedStyle(omove).getPropertyValue('position');

omove.style.opacity = 0.4;

omove.style.position = "absolute";

document.body.appendChild(omove);

omove.style.left = e.clientX-diffX+"px";

omove.style.top = e.clientY-diffY+"px";

}

function getdiff(e)

{

diffObj = e.target;

diffX = e.clientX-diffObj.offsetLeft;

diffY = e.clientY-diffObj.offsetTop;

}

//鼠标按下事件

function down(e)

{

if(isInclude(e.clientX,e.clientY,oclick))

{

isClick = true;

//克隆点击的触发节点

oclickClone=oclick.cloneNode(true);

//计算鼠标的偏移量(如果有margin的话会有偏移现象)

getdiff(e);

}

else

{

getdiff(e);

var child = obox.childNodes;

for(var i=0; i < child.length; i++)

{

//判断鼠标点击是否是容器内的元素，并且不能是占位div(如果不加这个占位div判断会有bug，具体原因不知道)

if(isInclude(e.clientX,e.clientY,child[i])&& child[i] != oplace)

{

isClick = true;

isIncludeBox = true;

//克隆元素用来拖动时的效果

oclickClone = child[i].cloneNode(true);

//克隆元素用来放下

oclickDown = child[i].cloneNode(true);

//按下之后删除元素，并使用移动效果来展示元素

obox.removeChild(child[i]);

moveMagic(oclickClone,e);

//插入占位div来弄

obox.insertBefore(oplace,child[i]);

// flag = true;

break;

}

}

}

}

//鼠标移动事件

function move(e)

{

if(isClick)

{

moveMagic(oclickClone,e);

//判断鼠标是否移动到了容器内部

if(isInclude(e.clientX,e.clientY,obox))

{

//计算容器内的子节点

var child = obox.childNodes;

//一旦进入就可以在首位置插入占位DIV

obox.insertBefore(oplace,child[0]);

//根据鼠标位置放置占位DIV

for(var i = 0; i < child.length; i++)

{

//因为占位DIV是唯一的，所以只需要这样判断即可

if(e.clientY > child[i].offsetTop+child[i].offsetHeight/2)

{

//判断是否拖动到了结尾

if(i != child.length-1)

obox.insertBefore(oplace,child[i+1]);

else

obox.appendChild(oplace);

}

}

}

}

}

//鼠标抬起事件

function up(e)

{

isClick = false;

//鼠标抬起则可以删除临时的拖动效果元素

document.body.removeChild(oclickClone);

//如果将元素放置到了容器内

if(isInclude(e.clientX,e.clientY))

{

var child = obox.childNodes;

//占位div的位置

var insertPlace;

for(var i=0; i

{

//确定占位div的位置

if(oplace === child[i])

{

obox.removeChild(child[i]);

insertPlace = i;

break;

}

}

//判断是否可以放置多个

if(!bisMany)

{

if(isIncludeBox)

ocreate = oclickDown;

if(insertPlace==child.length)

obox.appendChild(ocreate);

else

obox.insertBefore(ocreate,child[insertPlace]);

}

else

{

//可以放置多个则需要每个都克隆一下

if(isIncludeBox)

var ocreateClone = oclickDown;

else

var ocreateClone = ocreate.cloneNode(true);

if(insertPlace==child.length)

obox.appendChild(ocreateClone);

else

{

obox.insertBefore(ocreateClone,child[insertPlace]);

}

}

}

else

{

if(isIncludeBox)

{

var child = obox.childNodes;

for(var i=0; i

{

if(child[i] === oplace)

{

obox.removeChild(child[i]);

obox.insertBefore(oclickDown,child[i]);

}1

}

}

}

isIncludeBox = false;

}

document.addEventListener('mousemove',move);

document.addEventListener('mousedown',down);

document.addEventListener('mouseup',up);

}

以上这篇纯JS实现可拖拽表单的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。