1

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

我制作了一个 jsfiddle 来演示这个问题。

http://jsfiddle.net/Rn9gQ/

这里可以点击按钮添加新的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>
4

0 回答 0