写的这个javascript拖拽功能，为啥拖拽div1的时候，其它两个div也一起动？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了写的这个javascript拖拽功能，为啥拖拽div1的时候，其它两个div也一起动？相关的知识，希望对你有一定的参考价值。
当我拖拽div1的时候，其它两个div也一起动，是为什么呢？
代码如下：
<html>
<head>
<style>
#div1height:40px;width:40px;background:#ff0000;position:absolute;
#div2left:100px;height:40px;width:40px;background:yellow;position:absolute;
#div3left:200px;height:40px;width:40px;background:green;position:absolute;
</style>
<script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
window.onload=function()
drag("div1");
//drag("div2");
//drag("div3");
function drag(id)
var oDiv = document.getElementById(id);
oDiv.onmousedown=function(ev)
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove=function(ev)
var oEvent=ev || event;
oDiv.style.left=oEvent.clientX-disX+"px";
oDiv.style.top=oEvent.clientY-disY+"px";
document.onmouseup=function()
document.onmousemove=null;
document.onmouseup=null;
</script>
</head>
<body>
<div id='div1'>
<div id='div2'>
<div id='div3'>
</div>
</body>
</html>
width: 100px;
height: 100px;
background: red;
position: absolute;
参考技术A div1和div2没有结尾的</div>标签
sortable实现拖拽功能
使用sortable这个强力插件就很容易实现拖拽功能，它是目前比较牛逼的拖拽插件，无需jquery，就可以全面支持pc和移动，参考以下github文档就有很详细的说明，也给了很多
demo，插件就用我给你的那个就可以，不用额外添加其他库
GitHub：https://github.com/RubaXa/Sortable
以下的simple demo是我自己写的，就这么几行简单代码就完事了
simple demo：
html code：
<input type="hidden" value="" name="template_ending_order" id="template_ending_order">
<ul class="list-group" id="sort-ending-list">
<li class="list-group-item" draggable="false">致谢</li>
<li class="list-group-item" draggable="false">结论</li>
<li class="list-group-item">参考文献</li>
</ul>
<submit id="form-save">保存</submit)
js code：
$(document).ready(function(){
var ulElement = document.getElementById(‘sort-ending-list‘);
if (ulElement != null) {
var sortable = Sortable.create(ulElement, {
ghostClass: "sort-ghost"
});
}
$("#form-save").submit(function() {
setEndingOrder("#template_ending_order")
});
});
通过这个函数，将你的拖动结果拼接成一个字符串，比如："结论;参考文献;致谢"，你这个地方可以选择id作为拼接结果，比如“1；2；3”
function setEndingOrder(endingOrderId){
var ulElement = document.getElementById(‘sort-ending-list‘);
var liElements = ulElement.children;
var value = "";
for (var i=0; i<liElements.length; ++i) {
if (i < liElements.length -1)
value += liElements[i].innerHTML + ‘;‘;
else
value += liElements[i].innerHTML;
}
var inputElement = document.getElementById(endingOrderId);
inputElement.value = value;
}
class Template < ActiveRecord::Base
ENDING_PARTS =
[
Setting.templates.ending_order_conclusion,
Setting.templates.ending_order_reference,
Setting.templates.ending_order_resume
]
validates :chapter_count, :presence => true, :inclusion => { :in => 1..9 }
validates :conclusion, :presence => true, :inclusion => { :in => [0,1] }
validates :achievement, :presence => true, :inclusion => { :in => [0,1] }
validates :introduction, :presence => true, :inclusion => { :in => [0,1] }
# Conditional Validation not Working
validates :ending_order, :presence => true, :if => :valid_ending_order?
def valid_ending_order?
cur_parts = self.ending_order.split(‘;‘)
cur_parts.each do |part|
if ENDING_PARTS.include?(part) == false
return false;
end
end
return true;
end
end
def update
@thesis = Thesis.find(params[:thesis_id])
@template = @thesis.templateif @template.update(template_params)
。。。。。。
else
render :edit
end
else
render :edit
end
end
private
def template_params
params.require(:template).permit(: :resume, :ending_order, :introduction)
end
def structure_params
params.require(:template).permit(:structure_id)
end
以上是关于写的这个javascript拖拽功能，为啥拖拽div1的时候，其它两个div也一起动？的主要内容，如果未能解决你的问题，请参考以下文章