EasyUI可拖拽功能（Draggable）选择器的使用

最新推荐文章于 2020-08-25 10:21:23 发布

原创最新推荐文章于 2020-08-25 10:21:23 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #easyui #Draggable #选择器

EasyUI 专栏收录该内容

8 篇文章

订阅专栏

有什么不对地方望大家多多指教！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Draggable - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script>
        $(function () {
            //注意事项：
            //1、不给handle属性赋值，那handle属性相当于可拖拽元素本身；给handle属性赋值，但无法找到对应元素，那么该元素无法实现可拖拽；
            //2、用jquery选择器给handle属性赋值是在整个页面内部选择元素；而只写字符串的话是在可拖拽元素内部进行选择；
            //3、验证某种情况需要注释掉其他情况；


            //D：实际生成的可拖拽元素；H：实际生成的handle的元素；
            //O：D的选择器选到的所有元素； I：H的选择器选到的所有元素；

            //不去定义I：D是O全部，H是D元素本身
            $(".outer").draggable({
            });

            //n对1（O=多个元素，I=一个元素）
            //D是O最后一个可实现拖拽元素；H是I的唯一的元素
            $(".outer").draggable({
                handle:$("#inner2")
            });

            //1对n（O=一个元素，I=多个元素）
            //D是O的唯一元素；H是I的第一个的元素
            $("#outer1").draggable({
                handle: $(".inner")
            });
            //n对n 用jquery选择器（O=多个元素，I=多个元素）
            //D是O的最后一个可实现拖拽元素；H是I的第一个的元素
            $(".outer").draggable({
                handle: $(".inner")
            });
            //n对n 字符串选择（O=多个元素，I=多个元素）
            //D是O全部可实现拖动元素；H是I的（可拖动元素子元素集合内）第一个的元素
            $(".outer").draggable({
                handle: ".inner"
            });

        })
    </script>
</head>
<body>
    <h2>Basic Draggable</h2>
    <p>Move the boxes below by clicking on it with mouse.</p>

    <div class="outer" id="outer1" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc">
        <div class="depend" id="depend1" style="padding:5px;background:gray;color:#fff">干扰1</div>
        <div class="inner" id="inner1" style="padding:5px;background:#ccc;color:#fff">Title1</div>
        <div class="inner" id="inner2" style="padding:5px;background:blue;color:#fff">Title2</div>
    </div>
    <div  class="outer" id="outer2"  style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc;margin-top:10px">
        <div class="depend" id="depend2" style="padding:5px;background:gray;color:#fff">干扰2</div>
        <div class="inner" id="inner3" style="padding:5px;background:#ccc;color:#fff">Title3</div>
        <div class="inner" id="inner4" style="padding:5px;background:red;color:#fff">Title4</div>
    </div>
</body>
</html>