Zatrzaskuj podział na inny dział

Mam 2 elementy div, które znajdują się w opakowaniu div. Wrapper div jest przeciągalny. Używam jquery-uiZatrzaskuj podział na inny dział

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

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

wrapper jest przeciągany bo muszę przeciągnąć zarówno biggerDivision i smallerDivision razem ale muszę pstryknąć tylko smallerDivision do snapDivision. biggerDivision i smallerDivision są różnej wielkości

JQuery:

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

robi to jest zatrzaśnięcie opakowanie do snapDivision

Oto skrzypce w tym https://jsfiddle.net/buownnbn/

jakie zmiany należy wprowadzić w Pstryknę smallerDivision to snapDivision, a nie całe opakowanie.

Źródło

2015-11-01 Bhavesh

to obejść, spróbuj .. https: //jsfiddle.net/kishoresahas/buownnbn/3/ –

Nie mogłem znaleźć żadnego prostego sposobu, aby to zrobić.

Jest to tylko obejście dla scenariusza

$('.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>

Znany problem: nie jest w stanie przeciągnąć za pomocą .biggerDivision elementu

Źródło

2015-11-01 15:07:39

Muszę ustawić właściwość przeciągalną tylko na opakowaniu, to jest ograniczenie, a to utrudnia :(możesz zaproponować modyfikację tego – Bhavesh

Zatrzaskuj podział na inny dział

Odpowiedz

Powiązane problemy