如何用jQuery實現div隨滑鼠移動而移動？

阿新 • • 發佈：2022-01-26

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{utf-8}">
        <title></title>
        <script src="../jquery-3.2.0.js"></script>
        <style>
            .aa{
                height: 100px;
                width: 200px;
                position: absolute;
                background 
-color: green;
            }
        </style>
    </head>
    <body>
        <div class="aa"></div>
    </body>
</html>
<script>
    $(".aa").mousedown(function(e){
        //設定移動後的預設位置
        var endx=0;
        var endy=0;

        //獲取div的初始位置，要注意的是需要轉整型，因為獲取到值帶px 

        var left= parseInt($(".aa").css("left"));
        var top = parseInt($(".aa").css("top"));

        //獲取滑鼠按下時的座標，區別於下面的es.pageX,es.pageY
        var downx=e.pageX;
        var downy=e.pageY;     //pageY的y要大寫，必須大寫！！

     //    滑鼠按下時給div掛事件
    $(".aa").bind("mousemove",function(es){

        //es.pageX,es.pageY:獲取滑鼠移動後的座標 

        var endx= es.pageX-downx+left;     //計算div的最終位置
        var endy=es.pageY-downy+top;

        //帶上單位
        $(".aa").css("left",endx+"px").css("top",endy+"px")    
    });    
  })
    

    $(".aa").mouseup(function(){
        //滑鼠彈起時給div取消事件
        $(".aa").unbind("mousemove")
    })
    
</script>

如何用jQuery實現div隨滑鼠移動而移動？

<!DOCTYPE html> <html> <head> <meta charset=\"{utf-8}\"> <title></title>

div隨滑鼠移動而移動

技術標籤：csshtmljavascript 在頁面中，div將隨著滑鼠的移動而跟著移動，程式碼很簡單，一看就懂

Unity-Live2D實現GalGame中人物隨滑鼠點選移動

人物模型是從live2d下載下來的，這麼可愛的二次元不可能是我畫的。 live2d本身有對滑鼠監測的封裝方法（見物件L2DTargetPoint），滑鼠在live2d的拖拽管理座標系內會反饋一個滑鼠的影響度，可看成一個在-1到1之間的比

div隨滑鼠在瀏覽器的視窗任意移動

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

用jQuery實現抽獎程式

本文例項為大家分享了jQuery實現抽獎程式的具體程式碼，供大家參考，具體內容如下

Jquery實現div區域性頁面重新整理中js渲染失效問題解決

layui.jsp： <link rel=\"stylesheet\" href=\"<%=basePath%>/layui/css/layui.css\"> <script type=\"text/javascript\" src=\"<%=basePath%>/layui/layui.js\"></script>