jsに基づいて実現された画像のドラッグ&ドロップのソースコードの例
効果図:
直接コード
ここでは、jsの実现に基づいて、画像のドラッグ&ドロップのソースコードの文章を绍介します。jsの画像のドラッグ・ソートの内容については、以前の文章を検索してください。または、下の関连する文章を引き続きご覧ください。これからもよろしくお愿いします。
直接コード
<script>
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];
}
}
}
</script>
<ul id="ul1">
<li><img src="https://www.jq22.com/img/cs/500x500-1.png" width="200" height="150 "></li>
<li><img src="https://www.jq22.com/img/cs/500x500-2.png " width="200 " height="150 "></li>
<li><img src="https://www.jq22.com/img/cs/500x500-3.png " width="200 " height="150 "></li>
<li><img src="https://www.jq22.com/img/cs/500x500-4.png " width="200 " height="150 "></li>
<li><img src="https://www.jq22.com/img/cs/500x500-5.png " width="200 " height="150 "></li>
<li><img src="https://www.jq22.com/img/cs/500x500-6.png " width="200 " height="150 "></li>
</ul>
* {
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;
}
// class
function getClass(cls) {
var ret = [];
var els = document.getElementsByTagName("*");
for (var i = 0; i < els.length; i++) {
// els[i] cls className;.indexOf("cls") cls , >=0 ;
if (els[i].className === cls || els[i].className.indexOf("cls") >= 0 || els[i].className.indexOf(" cls") >= 0 || els[i].className.indexOf(" cls ") > 0) {
ret.push(els[i]);
}
}
return ret;
}
function getStyle(obj, attr) { // JS
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
function startMove(obj, json, fun) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var isStop = true;
for (var attr in json) {
var iCur = 0;
//
if (attr == "opacity") {
iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
} else {
iCur = parseInt(getStyle(obj, attr));
}
var ispeed = (json[attr] - iCur) / 8;
// 0 , 0 ;
ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
//
if (iCur != json[attr]) {
isStop = false;
}
//
if (attr == "opacity") {
obj.style.filter = "alpha:(opacity:" + (json[attr] + ispeed) + ")";
obj.style.opacity = (json[attr] + ispeed) / 100;
} else {
obj.style[attr] = iCur + ispeed + "px";
}
}
//
if (isStop) {
clearInterval(obj.timer);
if (fun) {
fun();
}
}
}, 30);
}
締め括りをつけるここでは、jsの実现に基づいて、画像のドラッグ&ドロップのソースコードの文章を绍介します。jsの画像のドラッグ・ソートの内容については、以前の文章を検索してください。または、下の関连する文章を引き続きご覧ください。これからもよろしくお愿いします。