1

我的代码：

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 () {
    }
});​

例如，我希望当我将元素拖动超过 200 像素（y 轴）时，它将当前 div 移动到 0 0 的位置。似乎这不起作用。我该怎么做/强迫它？

4

5 回答 5

2

试试这个，

演示 

jQuery(document).ready(function($) {
        $(".myDiv").draggable({
            start: function () {
                ImmagineDrag = $(this);
            },
            drag: function () {
                currentImageX = ImmagineDrag.position().top;

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

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

参考

于 2012-09-17T08:48:26.313 回答
2

好的，我一直在玩这个，我有一些代码可以让你继续前进，我认为这段代码正在做你想做的事，请参阅jsfiddle。

我不得不看一下 jqueryui 源代码以找到一种方法来做你想做的事，代码使用一些私有属性并调用私有方法来实现这一点。我的 hack 背后的基本思想是我想 cursorAt在事件时设置属性drag，因为cursorAt仅在拖动事件时由 jqueryui 源评估start，所以即使您稍后更改它，也不会使用新值。

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

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

要进一步改进此代码，您最好查看 可拖动的 jqueryui 源代码，特别是该_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 () {
    }
});​

​ ​</p>

于 2012-09-17T19:03:07.413 回答
1

就在您的以下行之后：

ImmagineDrag.css({ 'top': '0', 'left': '0' });

添加这个：

return false;

那应该做你想做的事。

于 2012-09-17T08:46:29.170 回答
0

拖动处理程序不断更新位置，您可以将代码移动到停止处理程序。这样，当您停止拖动时，它会恢复到 0,0 点。

可拖动插件内置了将移动限制到轴或边界元素的功能，您应该改用它。

于 2012-09-17T08:23:08.820 回答
0 
var ImmagineDrag  = null,
    currentImageX = null;

$(".myDiv").draggable({
    start: function() {
        ImmagineDrag = $(this);
    },
    drag: function() {
        currentImageX = ImmagineDrag.position().top;
        $('#score').html(currentImageX);
    },
    stop: function() {
        // place your CSS code to stop function
        if (currentImageX > 200) {
            ImmagineDrag.css({
                'top': '0',
                'left': '0'
            });
        }
    }
});

演示

于 2012-09-17T08:23:32.130 回答