javascript - 可拖动设置为零

Question

脚本的目标是拖动元素但保留元素的副本。

function makeDraggable() {
    $('.col-md-4').addClass('is-draggable');
    $('.is-draggable').draggable({
        start: function(event, ui){
            if($(this).hasClass('not-draggable'))
            return;

            var cl = $(this).clone();
            $(this).after(cl);
            var of = cl.offset();

            $(this).addClass('rect').offset({top:of.top,left:of.left}).css({width:cl.css('width'), height:cl.css('height')});
            makeDraggable();
            $(this).addClass('not-draggable');
        }
    });
}

makeDraggable();

当您在某些框上按下鼠标时，它会克隆框，然后将此元素拖动到左上角，并且不允许设置我自己的偏移量。我希望可拖动元素留在同一个地方并且不要跳跃。演示 jsfidle

Answer 1

您不能使用偏移量，因为它已被拖动事件使用。您可以使用边距来抵消您的可拖动。

此外，使用 ui.helper 获取偏移量

var of = $(ui.helper).offset();

$(this).addClass('rect').css({'margin-top':of.top,'margin-left':of.left}).css({width:cl.css('width'), height:cl.css('height')});

演示

外部 JSFiddle:http://jsfiddle.net/9QmbG/22

function makeDraggable() {
    $('.col-md-4').addClass('is-draggable');
    
    $('.is-draggable').draggable({
        start: function (event, ui) {
            var $this = $(this);
            
            if ($this.hasClass('not-draggable')) return;

            var cl = $this.clone();
            $this.after(cl);
            var of = $(ui.helper).offset();

            $this.addClass('rect').css({
                'margin-top': of.top,
                'margin-left': of.left
            }).css({
                width: cl.css('width'),
                height: cl.css('height')
            });
            
            makeDraggable();
            $this.addClass('not-draggable');
        }
    });
}

makeDraggable();

#score {
    height:50px;
}
.col-md-4 {
    width:40px;
    height:40px;
    margin:10px 20px;
    border:1px solid #000000;
    float:left;
    cursor:pointer;
    text-align:center;
    line-height:40px;
    position:relative;
    top:0;
    left:0;
}
.rect {
    position: absolute;
    z-index:100000;
    border-style: dashed;
    border-width: 2px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

<div id="score">&nbsp;</div>
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>