實現頁面元素的拖拽（jqueryui實現）

本文轉載自查看原文 2019-09-23 15:45 1690 javascript

之前實現元素的拖拽很多都是通過js手寫的，后來發現使用jqueryui實現，簡單特別多，而且能完成很多附加功能。

首先是最基本的用法。$(" ").draggable()就能實現指定元素的拖拽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
        <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    </head>
    <body>

        <div class="selector" style="width: 300px;height: 300px;background-color: lightsalmon;" >
        </div>
    </body>
    <script type="text/javascript">

       $(function(){
               $( ".selector" ).draggable();
       })
    </script>
</html>

有時候，我們需要拖動元素內部某一塊禁止拖動，又有些時候，我們只需要某一塊內容能被拖動。

可以借助屬性handle和cancel來實現，handle是可以指定元素，只有被指定的元素能拖動。cancel是剛好相反

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
        <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    </head>
    <body>

        <div class="handle" style="width: 300px;height: 300px;background-color: lightsalmon;" >
            <div class="selector1" style="width:100px;height: 100px;background-color: lightseagreen;"></div>
            <div id="test1" style="width: 100px;height: 100px;background-color: lightgreen;"></div>
        </div>
        
        <div class="cancel" style="width: 300px;height: 300px;background-color: lightcyan;" >
            <div class="selector2" style="width:100px;height: 100px;background-color: lightgrey;"></div>
            <div id="test2" style="width: 100px;height: 100px;background-color: lightpink;"></div>
        </div>
    </body>
    <script type="text/javascript">

       $(function(){
　　　　　　　　　//可以同時指定多個，使用逗號隔開
               $( ".handle" ).draggable({ handle: ".selector1,#test1" });
               $( ".cancel" ).draggable({ cancel: ".selector2,#test2" });
       })
    </script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jqueryui sortable拖拽后保存位置通過 JS 實現簡單的拖拽功能並且可以在特定元素上禁止拖拽 vue拖拽--實現表格行和列的拖拽 [sortable.js]---元素拖拽【vuedraggable】 JavaScript實現拖拽元素對齊到網格（每次移動固定距離） Vue拖拽組件列表實現動態頁面配置 html元素拖拽 Jquery拖拽元素方法 jQuery實現頁面元素智能定位 python+appium實現頁面元素的滑動 vue給元素綁定拖拽事件