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

例として、要素を200px（axis-y）を超えてドラッグすると、現在のdivが位置00に移動するようにします。これは機能しないようです。どうすればそれを実行/強制できますか？

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 のソースを調べなければなりませんでした。コードは、いくつかのプライベート プロパティを使用し、それを実現するためにプライベート メソッドを呼び出します。私のハックの背後にある基本的な考え方は、ドラッグ イベントで jqueryui ソースによってのみ評価されるため、イベント時にcursorAtプロパティを設定したいということです 。そのため、後で変更しても新しい値は使用されません。dragcursorAtstart

したがって、これを呼び出すと、渡したパラメーターが新しいプロパティ_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;
}​

ジャバスクリプト:

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 に答える