jquery ui 层拖放位置问题

三个层，main是大容器，handle和container默认并列被包含在main里面，且都可以拖动。将handle 拖到container中，松开鼠标，handle添加到container里面，并且位置相对鼠标位置不动，此时，再拖动container时，handle跟着container一起动。拖出container时，handle再重新添加到main里面。该如何实现？jquery ui

解决方案 »

  1.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet"
    href="../../jqueryuia/development-bundle/themes/base/jquery.ui.core.css">
    <link rel="stylesheet"
    href="../../jqueryuia/development-bundle/themes/base/jquery.ui.theme.css">
    <script src="../../../lib/jquery/jquery-1.9.1.js"></script>
    <script src="../../jqueryuia/development-bundle/ui/jquery.ui.core.js"></script>
    <script src="../../jqueryuia/development-bundle/ui/jquery.ui.widget.js"></script>
    <script src="../../jqueryuia/development-bundle/ui/jquery.ui.mouse.js"></script>
    <script
    src="../../jqueryuia/development-bundle/ui/jquery.ui.draggable.js"></script>
    <style>
    .c {
    width: 500px;
    height: 500px;
    background-color: #00a;
    }.c1 {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 50px;
    height: 60px;
    background-color: #a0a;
    z-index: 5;
    }.c2 {
    position: absolute;
    top: 50px;
    left: 200px;
    width: 200px;
    height: 210px;
    background-color: #ffa;
    }
    </style>
    </head>
    <body> <div id='main' class='c'> <div id='handle' class='c1'></div>
    <div id='container' class='c2'></div>
    </div>
    <script>
    var flag = false;
    $("#handle").draggable(
    {
    containment : "#main",
    scroll : false,
    start : function(e, mix) { },
    drag : function() { },
    stop : function(e, mix) {
    var hs = mix.offset;
    var cs = $("#container").offset();
    if (hs.left > cs.left && hs.top > cs.top
    && (hs.left + 50) < (cs.left + 200)
    && (hs.top + 60) < (cs.top + 210)) {
    if (!flag) {
    flag = true;
    var $c = $(e.target);
    $c.appendTo($("#container"));
    var top = (hs.top - cs.top) + 'px';
    var left = (hs.left - cs.left) + 'px';
    $c.css({
    'position' : 'absolute',
    'top' : top,
    'left' : left
    });
    }
    } else {
    if (flag) {
    flag = false;
    var $c = $(e.target);
    $c.appendTo($("#main"));
    var top = hs.top + 'px';
    var left = hs.left + 'px';
    $c.css({
    'position' : 'absolute',
    'top' : top,
    'left' : left
    });
    }
    }
    }
    });
    $("#container").draggable({
    containment : '#main',
    scroll : false });
    </script>
    </body>
    </html>