jquery - 无法手动更改可拖动 div 的顶部/左侧？

Question

我的Code :

HTML

<div id="score">&nbsp;</div>

<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv">3</div>

CSS

#score
{
    height:50px;
}

.myDiv
{
    width:40px;
    height:40px;
    margin:10px;
    border:1px solid #000000;
    float:left;
    cursor:pointer;
    text-align:center;
    line-height:40px;
    position:relative;
    top:0;
    left:0;
}​

jQuery

$(".myDiv").draggable({
    start: function () {
        ImmagineDrag = $(this);
    },
    drag: function () {
        currentImageX = ImmagineDrag.position().top;
        
        $('#score').html(currentImageX);

        if(currentImageX > 200) {
            ImmagineDrag.css({ 'top': '0', 'left': '0' });
        }            
    },
    stop: function () {
    }
});​

例如，我希望当我将元素拖动超过 200px(y 轴)时，它会将当前 div 移动到 0 0 位置。似乎这不起作用。我该如何做/强制它？

Answer 1

好吧，我已经玩了一会儿了，我有一些代码可以帮助您继续，我认为这段代码正在做您想要的事情，请参阅 jsfiddle .

我必须查看 jqueryui 源代码才能找到一种方法来完成您想要的操作，该代码使用一些私有(private)属性并调用私有(private)方法来实现该目的。我的黑客背后的基本想法是我想设置 cursorAt属性在 drag 事件时，因为 cursorAt 仅由 jqueryui 源在 start 拖动事件时评估，所以即使您稍后更改它，新的值将不会被使用。

因此，通过调用 _adjustOffsetFromHelper() ，这会将您传递的参数重新解释为新的 cursorAt 属性并应用它。

现在一个棘手的部分是找出正确的 top 和 left 值以传入新的 cursorAt 属性。我通过使用私有(private)属性 .offset.click.top 和 .offset.click.left 尽可能地近似它们，但对于某些事情 top 不匹配，必须硬编码一个值，它可能是一些边距偏移等，您可以使用其他私有(private)属性，例如 .offset.top 来尝试摆脱硬编码值。

要进一步改进此代码，您最好看看 draggable jqueryui source ，尤其是 _mouseStart() 方法(在 drag_start 时间执行的代码)有一些您可能会觉得有用的定位变量。

粘贴jsFiddle代码:

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

<div id="score">&nbsp;</div>

<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv">3</div>

CSS:

#score
{
    height:50px;
}

.myDiv
{
    width:40px;
    height:40px;
    margin:10px;
    border:1px solid #000000;
    float:left;
    cursor:pointer;
    text-align:center;
    line-height:40px;
    position:relative;
    top:0;
    left:0;
}​

JavaScript:

var adjusted = false;
$(".myDiv").draggable({
    start: function () {
        ImmagineDrag = $(this);
        startImageX = ImmagineDrag.position().top;
        startImageY = ImmagineDrag.position().left;
    },
    drag: function () {
        currentImageX = ImmagineDrag.position().top;
        currentImageY = ImmagineDrag.position().left;

        $('#score').html(currentImageX);

        if(currentImageX > 200) {
            if (!adjusted) {
                adjusted = true;
                drg = ImmagineDrag.data("draggable");
                ctop = drg.offset.click.top;
                cleft = drg.offset.click.left;
                newtop = currentImageX - startImageX + ctop;
                newleft = currentImageY - startImageY + cleft;
                drg._adjustOffsetFromHelper({top:newtop-12,left:newleft});
            }
        }            
    },
    stop: function () {
    }
});​

​​