Question

使用以下代码我尝试将拖放示例组合在一起，用于拖动限制到某个区域并添加其他可拖动项。初始三个拖动行为与预期一致，不能被拖到“容器”之外。-div。稍后添加＆＃39;拖动-divs则不会。

如何添加容纳在＆＃39;容器内的拖动器？比如前三个＆＃39;拖动-divs？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link href="http://threedubmedia.com/inc/img/favicon.ico" rel="shortcut icon" />
<link href="http://threedubmedia.com/inc/css/base.css" rel="stylesheet" />
<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/excanvas.min.js"></script>
<title>ThreeDubMedia &middot; jquery.event.drag</title>
</head>
<body>
<script type="text/javascript">
jQuery(function($){
    var num = 1;
    var $div = $('#container');
    $('.drag')
        .drag("start",function( ev, dd ){
            dd.limit = $div.offset();
            dd.limit.bottom = dd.limit.top + $div.outerHeight() - $( this ).outerHeight();
            dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();
        })
        .drag(function( ev, dd ){
            $( this ).css({
                top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
                left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
            });   
        });
    $('#add').click(function(){
        $('<div class="drag"/>')
            .text( num++ )
            .appendTo( document.body )
            .css({ 
                top: Math.random() * 241 + $div.offset().top, 
                left: Math.random() * ( $( window ).width() - 100 ) + 20,
            });
    });

});
</script>

<h1>Live Drag Demo</h1>
<p>
    <input type="button" id="add" value="Add a Box" />
    to the screen, drag it around, thanks to "live" delegation.
</p>
<div id="container"></div>
<div class="drag" style="left:40px;"></div>
<div class="drag" style="left:120px;"></div>
<div class="drag" style="left:200px;"></div>
<style type="text/css">
.drag {
    position: absolute;
    border: 1px solid #89B;
    background: #BCE;
    height: 58px;
    width: 58px;
    cursor: move;
    top: 120px;
    text-align: center;
    line-height: 58px;
    }
#container {
    height: 299px;
    border: 1px dashed #888;
    }
</style></body>
</html>

Answer 1

是的，它有效。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link href="http://threedubmedia.com/inc/img/favicon.ico" rel="shortcut icon" />
<link href="http://threedubmedia.com/inc/css/base.css" rel="stylesheet" />
<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/excanvas.min.js"></script>
<title>ThreeDubMedia &middot; jquery.event.drag</title>
</head>
<body>
<script type="text/javascript">
jQuery(function($){
    var num = 1;
    var $div = $('#container');
    $('.drag')
        .drag("start",function( ev, dd ){
            dd.limit = $div.offset();
            dd.limit.bottom = dd.limit.top + $div.outerHeight() - $( this ).outerHeight();
            dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();
        })
        .drag(function( ev, dd ){
            $( this ).css({
                top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
                left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
            });   
        });
    $('#add').click(function(){
        $('<div class="drag"/>')
            .text( num++ )
            .appendTo( document.body )
            .css({ 
                top: Math.random() * 241 + $div.offset().top, 
                left: Math.random() * ( $( window ).width() - 100 ) + 20,
            })
            .drag("start",function( ev, dd ){
                dd.limit = $div.offset();
                dd.limit.bottom = dd.limit.top + $div.outerHeight() - $( this ).outerHeight();
                dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();
            })
            .drag(function( ev, dd ){
                $( this ).css({
                    top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
                    left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
                });   
            });
    });

});
</script>

<h1>Live Drag Demo</h1>
<p>
    <input type="button" id="add" value="Add a Box" />
    to the screen, drag it around, thanks to "live" delegation.
</p>
<div id="container"></div>
<div class="drag" style="left:40px;"></div>
<div class="drag" style="left:120px;"></div>
<div class="drag" style="left:200px;"></div>
<style type="text/css">
.drag {
    position: absolute;
    border: 1px solid #89B;
    background: #BCE;
    height: 58px;
    width: 58px;
    cursor: move;
    top: 120px;
    text-align: center;
    line-height: 58px;
    }
#container {
    height: 299px;
    border: 1px dashed #888;
    }
</style></body>
</html>

结合拖放js的例子

1 个答案: