jQuery 拖動div，判斷拖動的div是否在一個div層上

時間 2019-11-13

標籤 jquery 拖動 div 判斷是否一個欄目 JQuery 简体版

原文原文鏈接

js代碼：css

  var div_x = 0;
  var div_y = 0;
  var click_x = 0;
  var click_y = 0;
  var con_left = 0;
  var con_right = 0;
  var con_top = 0;
  var con_bottom = 0;
  var move_left = 0;
  var move_right = 0;
  var move_top = 0;
  var move_bottom = 0;
  $(document).ready(function(){
   $("#move_div").mousedown(function(e){
    div_x = $(this).offset().left;
    div_y = $(this).offset().top;
    click_x = e.pageX;
    click_y = e.pageY;
    $("#move_div").bind("mousemove",function(event){
     $(this).css("margin-left",event.pageX-click_x+div_x-parseInt($("#con_div").css("margin-top").split("p")[0]));
     $(this).css("margin-top",event.pageY-click_y+div_y);
     con_left = $("#con_div").offset().left;
     con_right = $("#con_div").offset().left + parseInt($("#con_div").css("width"));
     con_top = $("#con_div").offset().top;
     con_bottom = $("#con_div").offset().top + parseInt($("#con_div").css("height"));
     move_left = $(this).offset().left;
     move_right =$(this).offset().left + parseInt($(this).css("width"));
     move_top = $(this).offset().top;
     move_bottom = $(this).offset().top + parseInt($(this).css("height"));
     if(((move_right > con_left && move_right < con_right) ||
      (move_left < con_right && move_right > con_left))&&
      ((move_bottom > con_top && move_bottom < con_bottom) ||
      (move_top < con_bottom && move_bottom > con_top))){
      $("#con_div").text("I'm comming");
     }else{
      $("#con_div").text("I'm leaved");
     }
    });
   });
   $("#move_div").mouseup(function(){
    $("#move_div").unbind("mousemove");
   });
   $("#move_div").mouseleave(function(){
    $("#move_div").unbind("mousemove");
   });
  });

html代碼html

 <body>
    <div id="move_div" style="width: 200px;height: 200px;border: 1px solid gray;position: relative;z-index: 1;float:left;"></div>
    
    <div id="con_div" style="width: 400px;height: 400px;border: 1px solid red;margin-left: 500px; margin-top:50px;">hello,are you comming?</div>
  </body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。