jquery可拖动包含问题答案

【问题标题】：jquery draggable containment issuejquery可拖动包含问题
【发布时间】：2013-11-09 00:41:49
【问题描述】：

我有一个带有包含选项的可拖动函数。容器被锁定在 div 上，但拖动的元素仅尊重 div 包含的两侧（仅 div 的底部和右侧），而在顶部，拖动的元素不会被阻止超出，左侧的元素是在到达旁边之前被挡住了。

这是 HTML：

<div id="containermy"> </div>
<div id="mapplane"><img src="templates/protostar/images/planeminiature.png" />

CSS：

.banner #containermy {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    height:500px;
    width:500px;
    border:solid 1px yellow;
    position: absolute;
}

还有我的 jQuery：

$('.mapban').parent().jclip(0, 0, 1060, 750);
$('#mapplane').draggable({ containment: $('#containermy'),scroll: false});

【问题讨论】：

标签： jquery jquery-ui-draggable

【解决方案1】：

看起来问题在于容器不采用 jQuery 对象。它只取值 parent、document 或 window。

来自http://api.jqueryui.com/draggable/#option-containment：

字符串：可能的值：“父”、“文档”、“窗口”。

<div id="containermy">
  <img id="mapplane" src="http://www.strictlyphp.com/blog/wp-content/uploads/2009/07/icon_javascript.png" />
</div>

$('#mapplane').draggable(
{ 
    containment: "parent",
    scroll: false
});

#containermy {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  height:500px;
  width:500px;
  border:solid 1px yellow;
  position: absolute;
}

演示 http://jsfiddle.net/6szL4/

【讨论】：