没有包含JQuery Draggable帮助器

Question

我使用以下代码初始化draggable，使用帮助器创建缓动效果。然而，使用辅助装置会破坏容器并允许可拖动元件离开其容器。我如何将帮助器约束到容器？

更多信息：元素包含在左边框和上边框内，而不是右边框和下边框。

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);
            });
        }); 

Answer 1

使用以下代码将帮助器定义为<div class="drag"></div>。

helper: function(){
            return $('<div class="drag"></div>').css('opacity',0);
    },

JS Fiddle

http://jsfiddle.net/qmkVR/13/