jsdiv拖动自动排序_js实现div的拖拽

『壹』 html js 代码怎么在多个div框自动顺序显示一组图片/绝对地址/，像走圆环一样走一圈

<!DOCTYPE html>

<html>

<head>

*{margin:0;padding:0;}

html,body{height: 100%}

body{overflow-x: hidden;}

.box{

width: 100%;

display: flex;

flex-wrap: wrap;

}

.box li{

width: 25%;

background-color: #ffccff;

margin-bottom: 10px;

}

</style>

</head>

<body>

</ul>

</body>

</html>

『贰』 javascript DIV上下拖放功能

他们的不行的话，找我。
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中的地址复制到浏览器的网址输入框内。

『叁』 js实现div的拖拽

把下面的代码存进一个html文件，兼容手机和PC

<style>
*{
margin:0;
padding:0
}
#user_cover{
position:fixed;
top:40%;
right:0;
width:4rem;
height:4rem;
background-color:rgba(0,0,0,0.3);
}
</style>
<divid="user_cover"></div>
<script>
functiononTouchMove(point){
document.getElementById('user_cover').style.top=(point.changedTouches[0].clientY)+"px";
document.getElementById('user_cover').style.left=(point.changedTouches[0].clientX)+"px";
}
functiononMouseDown(point){
document.onmousemove=function(event){
document.getElementById('user_cover').style.top=event.clientY+"px";
document.getElementById('user_cover').style.left=event.clientX+"px";
console.log(point);
console.log(event);
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
}
document.getElementById('user_cover').addEventListener('touchmove',onTouchMove,false);
document.getElementById('user_cover').addEventListener('mousedown',onMouseDown,false);
</script>

『肆』使用js+css做一个仿照安卓手机桌面菜单，可以拖动排序、合并菜单的网页

拖动到一个div里这个jq ui有例子就不说了，重点就是拖进去后样式的变专化，就是在属原件拖入后，那么1个元素变2个了，就必须在他们的2个元素外城wrap一个div 给包着。然后用css 修改里面元素的样式：大小，以及元素间的间距.

<style>
.bao,.box{width:60px;height:60px;position:absolute;}
.bao.box{width:20px;height:20px;position:relative;display:inline-block;margin:5px;}
</style>

<divclass="boxbox1"></div>

<divclass="bao">
<divclass="boxbox2"></div>
<divclass="boxbox3"></div>
</div>

大概就是这样的一个思路

『伍』 JS DIV 点击排序

<scripttype="text/javascript">
	vardiv=document.getElementsByTagName("div")[0];
	div.onclick=function(){
		if(this.children[0].innerHTML=="正序"){
			this.children[0].innerHTML="反序";
		}else{
			this.children[0].innerHTML="正序";
		}
		vardivs=document.getElementsByClassName("titleDiv");
		for(vari=0,arr=[];i<divs.length;arr.push(divs[i++]));
		arr.reverse();
		for(vari=0;i<arr.length;document.body.appendChild(arr[i++]));
	}
</script>

可以连续改变顺序

可以1 2 3 4 5,

也可以5 4 3 2 1

『陆』 js如何实现当前div 排序

<body>
	<divdata-id="1">1111111</div>
<divdata-id="4">2222222</div>
<divdata-id="3">3333333</div>
<divdata-id="5">4444444</div>
<divdata-id="2">5555555</div>
</body>
<script>
	varaDiv=document.getElementsByTagName('div');
	vararr=[];
	for(vari=0;i<aDiv.length;i++)
	{
		arr.push(aDiv[i]);//aDiv是元素的集合，并不是数组，所以不能直接用数组的sort进行排序。
	}
	arr.sort(function(a,b){returna.getAttribute('data-id')-b.getAttribute('data-id')});
	for(vari=0;i<arr.length;i++)
	{
		document.body.appendChild(arr[i]);//将排好序的元素，重新塞到body里面显示。
	}
</script>

思路：给div添加私有属性，通过私有属性排序。

『柒』 js如何实现div的循环排序

页面一旦刷新就不会知道上次的顺序了，可以随机产生一个顺序，
可以把里面的4个div写在页面，在js中box_0531这个div，然后把那4个按随机出来的顺序插入。

『捌』 js 序号重新排列问题

1、利用js代码首先创建一个div，document.createElement('div');
2、确认div添加位置，可以在某个dom元素后面，或者通过css属性控制具体位置，主要通过left/top等属性控制。
3、确定位置之后，显示div即可。
示例：比如html中有一个文本输入框，我们现在需要在挨着输入框右下角位置显示一个div。
<input type="text" id="city" value="beijing"/>
方法：
function createDiv(){
//首先创建div
var descDiv = document.createElement('div');
document.body.appendChild(descDiv);
//获取输入框dom元素
var text = document.getElementById('city');
//计算div的确切位置
var seatX = text.offsetLeft + text.offsetWidth;//横坐标
var seatY = text.offsetTop + text.offsetHeight;//纵坐标
//给div设置样式，比如大小、位置
var cssStr = "z-index:5;width:420px;height:300px;background-color:#FFFF99;border:1px solid black;position:absolute;left:"
+ seatX + 'px;top:' + seatY + 'px;';
//将样式添加到div上，显示div
descDiv.style.cssText = cssStr;
descDiv.innerHTML = '这是一个测试的div显示的内容';
descDiv.id = 'descDiv';
descDiv.style.display = 'block';
}

『玖』 js如何实现下拉菜单选择正序倒序，然后div内容的正序和倒序

数组方法sort 进行排序例如

arr.sort((a,b)=>{//数组从大到小进行排序
returna-b;
});

导航:首页 > 编程语言 > jsdiv拖动自动排序

jsdiv拖动自动排序

与jsdiv拖动自动排序相关的资料

友情链接