Question

我正在使用jQuery draggable插件并面临下一个问题。在可拖动创建之后，插件不会应用指定的包含选项。

您可以在此处找到一个示例：http://jsfiddle.net/qQYsj/。

// Containment will be applied after first move attempt
$('.item').draggable({ containment: [100, 100, 200, 200] });

有没有办法在没有额外逻辑的情况下应用遏制，这将计算允许的位置和位置元素？（这个逻辑已经存在于插件中）

THX。

Answer 1

不确定这是否是您要找的，但这可能是一个选项......

.item
{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
}


// Containment will be applied after first move attempt
var xpos = 100,
    ypos = 100;
$('.item').css({
    "top": ypos+"px",
    "left": xpos+"px"
  }).draggable({ containment: [ypos, xpos, 200, 200] });

http://jsfiddle.net/qQYsj/1/

Answer 2

我认为您的可拖动遏制措施正如其预期的那样。但是，您的可拖动元素不在该容器内。

为什么不直接使用CSS将.item放在收容区域内？

<强> jsFiddle

.item
{
    position:absolute;
    top: 100px;
    left:100px;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

第二个想法，当你说“模拟拖动”时，你在谈论这样的事情：

<强> jsfiddle2

// drag will start after dragging 100px
$('.item').draggable({ 
    containment: [100, 100, 200, 200],
    distance: 100
});

Answer 3

如果没有添加重复逻辑，我没有找到任何可能的解决方案（可拖动插件中已存在定位算法，但我不能强制执行插件）。

所以我添加了下一个代码来更新项目位置：

function updateItemPosition(item, container)
{
    var itemRect = getRect(item), currentPosition = item.position(),
        position = getItemPosition(getRect(container), itemRect);

    item.css('top', position.top - itemRect.top + currentPosition.top + 'px')
        .css('left', position.left - itemRect.left + currentPosition.left + 'px');
}

function getRect(target)
{
    var result = target.offset();

    result.width = target.outerWidth();
    result.height = target.outerHeight();

    return result;
}

function getItemPosition(containerRect, itemRect)
{
    var result = {};

    result.top = Math.max(containerRect.top, Math.min(containerRect.top + containerRect.height - itemRect.height, itemRect.top));
    result.left = Math.max(containerRect.left, Math.min(containerRect.left + containerRect.width - itemRect.width, itemRect.left));

    return result;
}

它应该像：

一样使用

updateItemPosition($('.item'), $('.placeholder'));

jQuery draggable不会在创建时应用包含

3 个答案: