h 5ドラッグ&jsドラッグ効果を実現

5498 ワード

今日は超暇だったなぁ~前にページがあったことを思い出して引っ张って面白かった!自分で勉强して游んでまずネット上の多くのjsがモップを実现して、私はあまりjqueryを使ったことがなくて、ここで2つの比较的に面白いモップのコードを分かち合って、もちろん私が书いたのではありませんて、大神のコードを摘み取ります:1、1つのdivの简単なモップ







  

  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がドラッグを実現し、最も簡単だと思います.
  • は、2つの矩形の中でp要素の内容
  • をドラッグする.

    !

    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 "; }