我正在使用下面的代码来初始化可拖动,使用帮助器来创建缓动效果。然而,使用 helper 会破坏容器并允许可拖动元素离开它们的容器。我如何将助手约束到容器?
更多信息:元素包含在左边框和上边框内,而不是右边框和下边框。
JSFiddle:http: //jsfiddle.net/qmkVR/12/
$( ".drag" ).draggable( {
containment: con_outer,
scroll: false,
helper: function(){
return $('<div></div>').css('opacity',0);
},
drag: function(event, ui){
$(this).stop().animate({
top: ui.helper.position().top,
left: ui.helper.position().left
},200,'easeOutCirc');
},
start: function() {
//Make the dragged item the top-most
zindex ++;
$(this).css("z-index",zindex);
}
}).each(function(index, value) {
var $this = $(this);
$this.click(function() {
//Click only registers if the object isn't being as dragged
if($this.is(".ui-draggable-dragging")) {
return;
}
clickPhoto(index);
});
});