2

このjsFIDDLEをチェックしてください

<div id="wrapper">
    <div class="item">
        <div class="button_area"></div>
        <div class="icon"></div>
    </div>

    <div class="item">
        <div class="button_area"></div>
        <div class="icon"></div>    
    </div>
</div>​

これは html コードで、.button_area をドラッグしています:

$('.button_area').draggable({});

1つのことを除いて、想定どおりに機能しています。赤い領域 (2 番目の黄色の四角) をクリックして左方向 (最初の黄色の四角) にドラッグし始めると、マウスが 2 番目の黄色の四角 (親) を超えたときにドラッグ プロセスを停止する必要があります。ドラッグ可能ではありませんオブジェクト (ヘルパー) ... マウス。

4

2 に答える 2

3

この方法でのみjqueryを変更する必要があります

$( ".button_area" ).draggable({
drag: function(event, ui) { 
  if(my_condition) 
      return false; }
  });​

ヒント！

1つの例は、これに沿ったものです:

$( ".button_area" ).draggable({
drag: function(event, ui) { 
  if($('.button_area').offset().left > 50) 
  { 
     $( '.button_area' ).draggable( 'option',  'revert', true ).trigger( 'mouseup' );
  } 
 }
 });​
于 2012-10-08T15:20:08.350 に答える
2

sokie と Lunik の助けを借りて、私はそれをやりました: jsFIDDLE SOLUTION

みんなありがとう。

$( ".button_area" ).draggable({});

$(".item").mouseout(function() {
    $( '.button_area' ).draggable( 'option',  'revert', true ).trigger( 'mouseup' );
});
于 2012-10-08T15:39:08.037 に答える