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>