2
我正在创建一个div并在其中放置一个新div，以便我可以使用; http://threedubmedia.com/code/event/drag#demos在组合演示中拖放多个选择失败
我结合下面的演示的：
- 包含
- 活跃
- 多
- 活（动态地添加新的div）
- resize2
我可以动态添加新的div s到包含的空间，这个div也是可以调整大小和移动的。 问题是它表现奇怪。 - 点击添加后，您无法立即拖动该新框。 - 多选不适用于所有项目 - 我有一个情况，其中多选3项，但我不能取消选择它们。
这里的代码： http://jsfiddle.net/GVNv5/2/
场景1：拖动 3个箱子被堆放在每个 - 其他的顶部（这里没问题） - 尝试立即拖着机顶盒（不点击第一）你看到它不动。放开你的鼠标再试一次，现在它会移动。 （第二个和第三个盒子也会移动） - 点击添加一个盒子按钮，立即尝试移动它，它也不会移动（第二次） - 单击一个盒子将其选中（颜色为红色）你会看到没有选中的框。
场景2：多选 再次运行演示 - 单击一个框以选中它（红色）它不会在第一次单击时进行选择。 （按住鼠标仍然） - 单击框并拖动鼠标，现在释放鼠标..框被选中。 - 选择框1和2 - 创造新的对话框，然后选择它 - 现在你不能取消选择框1和2
<html>
<head>
<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>
</head>
<body>
<style type="text/css">
.drag {
font-size:8px;
position: absolute;
border: 1px solid #89B;
/*background: #BCE;*/
background: rgba(212, 217, 240, .8);
height: 58px;
width: 58px;
cursor: move;
}
#map_container {
height: 299px;
width:50%;
border: 1px dashed #888;
}
.handle {
position: absolute;
height: 6px;
width: 6px;
border: 1px solid #89B;
background: #9AC;
}
.NW, .NN, .NE {
top: -4px;
}
.NE, .EE, .SE {
right: -4px;
}
.SW, .SS, .SE {
bottom: -4px;
}
.NW, .WW, .SW {
left: -4px;
}
.SE, .NW {
cursor: nw-resize;
}
.SW, .NE {
cursor: ne-resize;
}
.NN, .SS {
cursor: n-resize;
left: 50%;
margin-left: -4px;
}
.EE, .WW {
cursor: e-resize;
top: 50%;
margin-top: -4px;
}
.selected {
background-color: #ECB;
border-color: #B98;
}
.selected .handle {
background-color: #CA9;
border-color: #B98;
}
.active {
background-color: #BEE;
border-color: #8BB;
}
</style>
<script type="text/javascript">
jQuery(function($){
var $div = $('#map_container');
//----------------------------------------------------------
// adding new div to drag
//----------------------------------------------------------
var num = 1;
$('#add').click(function(){
num++;
$('<div class="drag">'+num+
'<div class="handle NE"></div>'+
'<div class="handle NN"></div>'+
'<div class="handle NW"></div>'+
'<div class="handle WW"></div>'+
'<div class="handle EE"></div>'+
'<div class="handle SW"></div>'+
'<div class="handle SS"></div>'+
'<div class="handle SE"></div>'+
'</div>')
.appendTo($div)
});
//----------------------------------------------------------
//dragging and resizing //----------------------------------------------------------
$(document).on("drag",function(){
$('.drag')
.click(function(){
$(this).toggleClass("selected");
})
.drag("init",function(){
if ($(this).is('.selected'))
return $('.selected');
})
.drag("start",function(ev, dd){
dd.attr = $(ev.target).prop("className");
$(this).addClass("active");
//console.log(dd.attr);//to log some stuff to the console (you could use firefox firebug to see)
dd.limit = $div.offset();
dd.limit.bottom = dd.limit.top + $div.outerHeight() - $(this).outerHeight();
dd.limit.right = dd.limit.left + $div.outerWidth() - $(this).outerWidth();
dd.width = $(this).width();
dd.height = $(this).height();
})
.drag(function(ev, dd){
var props = {};
if (dd.attr.indexOf("E") > -1){
props.width = Math.max(32, dd.width + dd.deltaX);
}
if (dd.attr.indexOf("S") > -1){
props.height = Math.max(32, dd.height + dd.deltaY);
}
if (dd.attr.indexOf("W") > -1){
props.width = Math.max(32, dd.width - dd.deltaX);
props.left = dd.originalX + dd.width - props.width;
}
if (dd.attr.indexOf("N") > -1){
props.height = Math.max(32, dd.height - dd.deltaY);
props.top = dd.originalY + dd.height - props.height;
}
var props2 = {};
if (dd.attr.indexOf("drag") > -1)
{
props2.top =Math.min(dd.limit.bottom, Math.max(dd.limit.top, dd.offsetY));
props2.left =Math.min(dd.limit.right, Math.max(dd.limit.left, dd.offsetX));
}
$(this).css(props2);
if(dd.attr == 'drag')
{
//you can do stuff here if needed
}
else if(dd.attr == 'handle NE' || dd.attr == 'handle NN' || dd.attr == 'handle NW' || dd.attr == 'handle WW' || dd.attr == 'handle EE' || dd.attr == 'handle SW' || dd.attr == 'handle SS' || dd.attr == 'handle SE')
{
$(this).css(props);
}
})
.drag("end",function(){
$(this).removeClass("active");
});
});
});
</script>
<input type="button" id="add" value="Add a Box" />
<div id="map_container">
<div class="drag">
<div class="handle NE"></div>
<div class="handle NN"></div>
<div class="handle NW"></div>
<div class="handle WW"></div>
<div class="handle EE"></div>
<div class="handle SW"></div>
<div class="handle SS"></div>
<div class="handle SE"></div>
</div>
<div class="drag">
<div class="handle NE"></div>
<div class="handle NN"></div>
<div class="handle NW"></div>
<div class="handle WW"></div>
<div class="handle EE"></div>
<div class="handle SW"></div>
<div class="handle SS"></div>
<div class="handle SE"></div>
</div>
<div class="drag">
<div class="handle NE"></div>
<div class="handle NN"></div>
<div class="handle NW"></div>
<div class="handle WW"></div>
<div class="handle EE"></div>
<div class="handle SW"></div>
<div class="handle SS"></div>
<div class="handle SE"></div>
</div>
</div>
</body>
</html>
也有同样的问题... –