【发布时间】：2014-05-28 22:06:01
【问题描述】：
我正在创建一个 div 并在其中放置一个新的 div，我可以使用它来拖动； http://threedubmedia.com/code/event/drag#demos
我结合了以下演示：
- 包含
- 有效
- 多
- live（动态添加新的 div）
- 调整大小2
我可以动态添加新的 div 到包含的空间，这个 div 也可以重新调整大小和移动。 问题是它的行为很奇怪。 - 单击添加后，您无法立即拖动该新框。 - 多项选择不适用于所有项目 - 我遇到过多次选择 3 项的情况，但我无法取消选择它们。
这里是代码： http://jsfiddle.net/GVNv5/2/
场景一：拖动 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>
【问题讨论】：
-
也有同样的问题...
标签： javascript drag-and-drop resize