EasyUI可拖拽功能(Draggable)选择器的使用

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

<!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>

你可能感兴趣的:(jquery,easyui,选择器,draggable)