您现在的位置是:首页 > Javascript
当前栏目
基于js鼠标拖动图片排序
2023-03-07 09:48:52 时间
分享一款基于js的图片排序效果。鼠标拖动图片,重新排列图片的排列顺序。该插件适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:
实现的代码。
html代码:
<ul id="ul1">
<li>
<img src="images/1.jpg" width="200" height="150" /></li>
<li>
<img src="images/2.jpg" width="200" height="150" /></li>
<li>
<img src="images/3.jpg" width="200" height="150" /></li>
<li>
<img src="images/4.jpg" width="200" height="150" /></li>
<li>
<img src="images/5.jpg" width="200" height="150" /></li>
<li>
<img src="images/6.jpg" width="200" height="150" /></li>
</ul>
css代码:
*
{
margin: 0;
padding: 0;
list-style: none;
}
#ul1
{
width: 660px;
position: relative;
margin: 10px auto;
}
#ul1 li
{
width: 200px;
height: 150px;
float: left;
list-style: none;
margin: 10px;
}
#ul1 li:hover
{
border-color: #9a9fa4;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.85);
}
#ul1 .active
{
border: 1px dashed red;
}
js代码:
window.onload = function () {
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName("li");
var disX = 0;
var disY = 0;
var minZindex = 1;
var aPos = [];
for (var i = 0; i < aLi.length; i++) {
var t = aLi[i].offsetTop;
var l = aLi[i].offsetLeft;
aLi[i].style.top = t + "px";
aLi[i].style.left = l + "px";
aPos[i] = { left: l, top: t };
aLi[i].index = i;
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = "absolute";
aLi[i].style.margin = 0;
setDrag(aLi[i]);
}
//拖拽
function setDrag(obj) {
obj.onmouseover = function () {
obj.style.cursor = "move";
}
obj.onmousedown = function (event) {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
obj.style.zIndex = minZindex++;
//当鼠标按下时计算鼠标与拖拽对象的距离
disX = event.clientX + scrollLeft - obj.offsetLeft;
disY = event.clientY + scrollTop - obj.offsetTop;
document.onmousemove = function (event) {
//当鼠标拖动时计算div的位置
var l = event.clientX - disX + scrollLeft;
var t = event.clientY - disY + scrollTop;
obj.style.left = l + "px";
obj.style.top = t + "px";
/*for(var i=0;i<aLi.length;i++){
aLi[i].className = "";
if(obj==aLi[i])continue;//如果是自己则跳过自己不加红色虚线
if(colTest(obj,aLi[i])){
aLi[i].className = "active";
}
}*/
for (var i = 0; i < aLi.length; i++) {
aLi[i].className = "";
}
var oNear = findMin(obj);
if (oNear) {
oNear.className = "active";
}
}
document.onmouseup = function () {
document.onmousemove = null; //当鼠标弹起时移出移动事件
document.onmouseup = null; //移出up事件,清空内存
//检测是否普碰上,在交换位置
var oNear = findMin(obj);
if (oNear) {
oNear.className = "";
oNear.style.zIndex = minZindex++;
obj.style.zIndex = minZindex++;
startMove(oNear, aPos[obj.index]);
startMove(obj, aPos[oNear.index]);
//交换index
oNear.index += obj.index;
obj.index = oNear.index - obj.index;
oNear.index = oNear.index - obj.index;
} else {
startMove(obj, aPos[obj.index]);
}
}
clearInterval(obj.timer);
return false; //低版本出现禁止符号
}
}
//碰撞检测
function colTest(obj1, obj2) {
var t1 = obj1.offsetTop;
var r1 = obj1.offsetWidth + obj1.offsetLeft;
var b1 = obj1.offsetHeight + obj1.offsetTop;
var l1 = obj1.offsetLeft;
var t2 = obj2.offsetTop;
var r2 = obj2.offsetWidth + obj2.offsetLeft;
var b2 = obj2.offsetHeight + obj2.offsetTop;
var l2 = obj2.offsetLeft;
if (t1 > b2 || r1 < l2 || b1 < t2 || l1 > r2) {
return false;
} else {
return true;
}
}
//勾股定理求距离
function getDis(obj1, obj2) {
var a = obj1.offsetLeft - obj2.offsetLeft;
var b = obj1.offsetTop - obj2.offsetTop;
return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
}
//找到距离最近的
function findMin(obj) {
var minDis = 999999999;
var minIndex = -1;
for (var i = 0; i < aLi.length; i++) {
if (obj == aLi[i]) continue;
if (colTest(obj, aLi[i])) {
var dis = getDis(obj, aLi[i]);
if (dis < minDis) {
minDis = dis;
minIndex = i;
}
}
}
if (minIndex == -1) {
return null;
} else {
return aLi[minIndex];
}
}
}
via:http://www.w2bc.com/Article/23686
未经允许不得转载:肥猫博客 » 基于js鼠标拖动图片排序
相关文章
- C# 调用js库的方法
- WEB中的敏感文件泄漏
- Frida Internal - Part 2: 核心组件 frida-core
- 如何在H5页面或者移动端Uniapp/vue中接入在线客服系统,h5客服系统的接入方法
- 网站在线客服系统实时语音视频聊天实战开发,最兼容的getUserMedia获取音视频流的函数方法
- 分享下关于JS 数组的 28 个方法
- 前端图片压缩方案及代码实现
- 构造http请求的几种方式(附源码)
- 从recat源码角度看setState流程_2023-02-13
- 从react源码看hooks的原理_2023-02-13
- react的useState源码分析_2023-02-13
- 如何用 JavaScript 编写你的第一个单元测试
- React报错之Element type is invalid
- 3xx HTTP状态码的终极指南
- JS对象到原始值的转换
- 2年过去了,谁还记得曾想取代Node.js的他?
- DV 多域名 SSL证书
- CSS技术入门
- 【Vue】1524- 分享 22 道常被问及的 JavaScript 面试题
- 【Web技术】1528- 来自大厂前端页面截图方案