h 5ドラッグ&jsドラッグ効果を実現
5498 ワード
今日は超暇だったなぁ~前にページがあったことを思い出して引っ张って面白かった!自分で勉强して游んでまずネット上の多くのjsがモップを実现して、私はあまりjqueryを使ったことがなくて、ここで2つの比较的に面白いモップのコードを分かち合って、もちろん私が书いたのではありませんて、大神のコードを摘み取ります:1、1つのdivの简単なモップ
最後にh 5がドラッグを実現し、最も簡単だと思います.は、2つの矩形の中でp要素の内容 をドラッグする.
Document
// var ele = document.querySelector('.box'); // var maxW = document.documentElement.clientWidth - ele.offsetWidth; var maxH = document.documentElement.offsetHeight - ele.offsetHeight; ele.onmousedown=function(e){// e = e||window.event; // , var nX = e.offsetX; var nY = e.offsetY; document.onmousemove=function(e){// document e = e||window.event; // var nLeft = e.pageX - nX; var nTop = e.pageY - nY; // nLeft = Math.min(maxW,Math.max(0,nLeft)); nTop = Math.min(maxH,Math.max(0,nTop)); ele.style.left = nLeft+"px"; ele.style.top = nTop+"px"; } } // ,move document.onmouseup=function(){ document.onmousemove = null; }
2、一个有意思一点的拖拽和效果
Document
var posArr = []
for (var i = 0; i < $("ul li").length; i++) {
posArr.push({
x: $("ul li").eq(i).offset().left,
y: $("ul li").eq(i).offset().top
})
}
$("ul li").on("mouseover", function () {
var index = $(this).index()
$(this).parent().addClass("bg")
$("ul").each(function () {
$(this).find("li").eq(index).addClass("bg")
})
})
$("ul li").on("mouseout", function () {
var index = $(this).index()
$(this).parent().removeClass("bg")
$("ul").each(function () {
$(this).find("li").eq(index).removeClass("bg")
})
})
$("ul li").on("click", function (e) {
var oDiv = $("<div class='bg2'></div>")
oDiv.css({
"left": $(this).offset().left + 1,
"top": $(this).offset().top + 1
})
$(".div").append(oDiv)
var disY = 0;
var disX = 0;
oDiv.mousedown(function (ev) {
var result = {
index: 0
}
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function (ev) {
oDiv.css('left', ev.pageX - disX);
oDiv.css('top', ev.pageY - disY);
})
$(document).mouseup(function (e) {
for (var i = 0; i < posArr.length; i++) {
var x = posArr[i].x - oDiv.offset().left;
var y = posArr[i].y - oDiv.offset().top;
x = x > 0 ? x : -x;
y = y > 0 ? y : -y;
var temp = x + y;
if (i == 0) { //
result.x = i;
result.y = temp;
} else {
if (result.y > temp) {
result.index = i;
result.y = temp;
}
}
}
oDiv.css('left', posArr[result.index].x + 1);
oDiv.css('top', posArr[result.index].y + 1);
$(document).off();
})
return false;
})
})
最後にh 5がドラッグを実現し、最も簡単だと思います.
!
:Internet Explorer 8 IE Safari 5.1 drag 。
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("demo").innerHTML = " p ";
}
function allowDrop(event) {
event.preventDefault(); //
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = " p ";
}