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

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

  

  

  











  //    

  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、一个有意思一点的拖拽和效果

  
  
  
  





  

    

    

    

    

    

    

    

    

  
  

    

    

    

    

    

    

    

    

  
  

    

    

    

    

    

    

    

    

  
  

    

    

    

    

    

    

    

    

  
  

    

    

    

    

    

    

    

    

  
  

    

    

    

    

    

    

    

    

  
  

    

    

    

    

    

    

    

    

  
  

    

    

    

    

    

    

    

    

  



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