Question

我有这个jquery小提琴我想要的是cover在pic-area内可以拖拽但只有在完全填满之后才会留下白色区域。请看一下。

#pic-area{
    overflow:hidden;
    height:150px;
    width:500px;
    border:2px solid #000;

}

更新

$(document).ready(function(){

$("#cover").draggable({

    stop: function(ev, ui) {
        var hel = ui.helper, pos = ui.position;
        //horizontal
        var h = -(hel.outerHeight() - $(hel).parent().outerHeight());
        if (pos.top >= 0) {
            hel.css({ top: 0 });
        } else if (pos.top <= h) {
            hel.css({ top: h });
        }
        // vertical
        var v = -(hel.outerWidth() - $(hel).parent().outerWidth());
        if (pos.left >= 0) {
            hel.css({ left: 0 });
        } else if (pos.left <= v) {
            hel.css({ left: v });
        }
    }
 });

});

我已经解决了！的 Working example

UPDATE2

ALTERNATIVE

var topX = $('#pic-area').outerWidth() - $('#cover').width() + ($('#pic-area').offset().left*2);
var topY = $('#pic-area').outerHeight() - $('#cover').height() + ($('#pic-area').offset().top*2);
$('#cover').draggable({
    containment: [topX, topY, 0, 0]
});

Answer 1

$(document).ready(function(){

$("#cover").draggable({

    stop: function(ev, ui) {
        var hel = ui.helper, pos = ui.position;
        //horizontal
        var h = -(hel.outerHeight() - $(hel).parent().outerHeight());
        if (pos.top >= 0) {
            hel.css({ top: 0 });
        } else if (pos.top <= h) {
            hel.css({ top: h });
        }
        // vertical
        var v = -(hel.outerWidth() - $(hel).parent().outerWidth());
        if (pos.left >= 0) {
            hel.css({ left: 0 });
        } else if (pos.left <= v) {
            hel.css({ left: v });
        }
    }
 });

});

我已经解决了！的 Working example

<强> UPDATE2

ALTERNATIVE

var topX = $('#pic-area').outerWidth() - $('#cover').width() + ($('#pic-area').offset().left*2); var topY = $('#pic-area').outerHeight() - $('#cover').height() + ($('#pic-area').offset().top*2); $('#cover').draggable({ containment: [topX, topY, 0, 0] });

Answer 2

您需要包含jqueryUI。这是cdn http://code.jquery.com/ui/1.11.0-beta.1/jquery-ui.min.js

它仍然很草率但它应该可以解决你的问题。

我更新了您的代码以证明它有效：

http://jsfiddle.net/jonigiuro/e93Z5/3/

#pic-area{
    overflow:hidden;
    height:800px;
    width:800px;
    border:2px solid #000;
}

在左侧的“外部资源”下，注意我添加了jquery UI

如何使用jQuery Draggable一种高级方法

2 个答案: