Question

我正在使用此处的拖放库：http://threedubmedia.com/code/event/drop/ 但对于动态添加的元素，我似乎无法多次使用它。

我已经做了一个jsfiddle来证明这个问题。

在这里，您可以单击按钮添加新的div，您可以拖动鼠标选择其中一些，但在完成拖动鼠标后无法再次选择。即使你第一次没有做出选择。

现在确定我哪里出错了，任何帮助将不胜感激：）

*编辑：添加以下代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<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>
<title>Testpage</title>
</head>
<body>
<script type="text/javascript">
jQuery(function($){
    $('#foo').click(function(){
        $('#main').append($('<div class="drop">foo</div>'))
    });
    $( document )
        .drag("start",function( ev, dd ){
            return $('<div class="selection" />')
                .css('opacity', .65 )
                .appendTo( document.body );
        })
        .drag(function( ev, dd ){
            $( dd.proxy ).css({
                    top: Math.min( ev.pageY, dd.startY ),
                left: Math.min( ev.pageX, dd.startX ),
                height: Math.abs( ev.pageY - dd.startY ),
                width: Math.abs( ev.pageX - dd.startX )
            });
        })
        .drag("end",function( ev, dd ){
            $( dd.proxy ).remove();
        })

        .on("dropstart", ".drop", function(){
            $(this).addClass("active");
        })
        .on("drop", ".drop", function(){
            $(this).toggleClass("dropped");
        })
        .on("dropend", ".drop", function(){
            $(this).removeClass("active");
        });
    $.drop({ multi: true });

});
</script>

<h1>Live adding of selectable elements</h1>
<p>Click and drag to select any number of dashed boxes.</p>

<input type="button" id="foo" value="Add a box"/>
<div id="main"></div>

<style type="text/css">
.selection {
    position: absolute;
    border: 1px solid #89B;
    background: #BCE;
    background-color: #BEC;
    border-color: #8B9;
    }
.drop {
    float: left;
    border: 1px dashed #888;
    background: #EEE;
    text-align: center;
    padding: 20px;
    margin: 0 10px 10px 0;
    }
.dropped {
    background-color: #EBC;
    border-color: #B89;
    }   
.active {  
    background-color: #CEB;
    border-color: #9B8;
    }
</style></body>
</html>

拖放事件仅在动态添加的div上运行一次

0 个答案: