ディビジョンを別の部門にスナップします

私は2つのdivをラッパーdivに入れています。ラッパーdivはドラッグ可能です。私は一緒にbiggerDivisionとsmallerDivisionの両方をドラッグする必要があるが、私はsnapDivisionにのみsmallerDivisionをスナップする必要があるためディビジョンを別の部門にスナップします

<div id="wrapper"> 
    <div class="biggerDivision"></div> 
    <div class="smallerDivision">>/div> 
</div> 

<div class="snapDivision"></div>

ラッパーがドラッグ可能であるjqueryの-UIを使用しています。 biggerDivisionとsmallerDivisionは、異なるサイズの

jQueryのです：

$('#wrapper').draggable({ 
    snap: ".snapDivision" 
});

は私が私をスナップするために行う必要がありますどのような変更このhttps://jsfiddle.net/buownnbn/

はこちら

snapDivision

にバイオリンをこのスナップされたラッパーをされてやってラッパー全体ではなく、snapDivisionのより小さい区分。

出典

2015-11-01 Bhavesh

これは仕事の周り、それを試してみてください。.. HTTPSです。 //jsfiddle.net/kishoresahas/buownnbn/3/ –

私はこれを行うための簡単な方法を見つけることができませんでした。

これが唯一の仕事は、あなたのシナリオのための周りで

$('.smallerDivision').draggable({ 
 
    snap: ".snapDivision", 
 
    drag : function(event, ui){ 
 
     $(".biggerDivision").css("top", ui.position.top + 23); 
 
     $(".biggerDivision").css("left", ui.position.left - 23); 
 
    } 
 
}); 
 

 
$('.biggerDivision').draggable({ 
 
    handle: ".smallerDivision" 
 
});

.biggerDivision { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color:red; 
 
    position: absolute; 
 
    top: 30px 
 
} 
 
.smallerDivision { 
 
    height: 100px; 
 
    width: 50px; 
 
    border-top : 23px solid green; 
 
    border-bottom : 50px solid green; 
 
    background-color:red; 
 
    position: absolute; 
 
    left:30px 
 
} 
 
.snapDivision { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color:blue; 
 
    position: absolute; 
 
    left: 200px 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 

 
<body> 
 
    <div id="wrapper"> 
 
     <div class="biggerDivision"></div> 
 
     <div class="smallerDivision"></div> 
 
    </div> 
 
    <div class="snapDivision"></div> 
 
</body>

既知の問題：.biggerDivision要素を使用してドラッグすることはできません

出典

2015-11-01 15:07:39

私はラッパーだけでドラッグ可能なプロパティを設定しなければなりません。制約があります。それはもっと難しくなります。 – Bhavesh

ディビジョンを別の部門にスナップします

答えて

関連する問題