Rozpocząć przeciąganie z innym elementem

czy możliwe jest uruchomienie przeciągnięcia za pomocą innego elementu?Rozpocząć przeciąganie z innym elementem

Na przykład: http://jsbin.com/igohod/edit#preview

Chcę rozpocząć przeciąganie #ct po kliknięciu na #icon. Warto zauważyć, że #icon nie pochodzi od #ct w drzewie DOM.

html

<div style="position:absolute; top:20px; left:10px;"> 
    <div id="icon">Icon</div> 
    </div> 

    <div style="position:absolute; top:20px; right:10px;"> 
    <div id="ct">start this drag when you drag the icon</div> 
    </div>

$(document).ready(function() 
{ 
    // $('#icon').draggable(); 
    $('#ct').draggable(); 
});

UPDATE:
New przykład z sortable
http://jsbin.com/igohod/8/edit#preview

Rozwiązanie
http://jsbin.com/igohod/13/edit#preview

Źródło

2011-12-26 user970727

To działa, ale zawsze dopisuje go do końca listy:

$(document).ready(function() { 
    $('#icon').mousedown(function(e) { 
    $('#ct').trigger(e); 
    }); 
    $('#dropHere').sortable({ placeholder: 'ui-state-highlight' }); 
    $('#ct').draggable({ connectToSortable: '#dropHere' });

Dodałem też styl CSS i spadł na zagnieżdżone div tagi:

#dropHere div{width:10; height:10; padding:10px; border:1px solid #000;}

http://jsbin.com/igohod/9/

Źródło

2011-12-28 15:51:58 shaun5

Myślę, że powodem, dla którego nowy div pojawia się tylko na dole sortowalnego div jest to, że współrzędne myszy i nowy div nigdy nie są w sortowalnym div razem ... – shaun5

Miałem rację. Jeśli element div zostanie przeniesiony do kursora, sortable działa normalnie. http://jsbin.com/igohod/11/ – shaun5

Perfekt! Po prostu dodam cursorAt: '{top: 15, left: 225}' do przeciągania i działa naprawdę fajnie! – user970727

Oto możliwe rozwiązanie:

$('#icon').draggable({drag: function(event, ui) { 
    $("#ct").parent().css("top", 20 + parseInt($(this).css("top"))); 
    $("#ct").parent().css("left", 200 + parseInt($(this).css("left"))); 
}});

Wystarczy zaktualizować wartości lewej i górnej części #ct kiedy przenieść ikonę dookoła.

Źródło

2011-12-26 09:43:05 kufi

nie chcę zmienić pozycję z ikoną:/... Dzięki za szybką odpowiedź. – user970727

Ah, ok. Oto rozwiązanie: http://jsbin.com/igohod/5 – kufi

Przykro mi, mój przykład nie był tak dobry. Chcę upuścić #ct na listę do sortowania. Z tego powodu próbuję "rozpocząć" przeciąganie innym elementem. tutaj jest przykład: http://jsbin.com/igohod/6/edit#javascript,html – user970727

Innym możliwym rozwiązaniem przy użyciu pomocnika do enkapsulacji przeciągalnego obiektu. W ten sposób nie musisz łapać żadnych zdarzeń myszy ani ustawiać dowolnych pozycji. jQuery obsługuje to za Ciebie.

$(document).ready(function() 
{ 

    $('#dropHere').sortable({ 
    placeholder: 'ui-state-highlight', 
    receive: function(event, ui) { 
     $(this).find('.drophandle').replaceWith(ui.helper); 
     $(ui.helper).attr('style',''); 
    } 
    }); 

    $('#icon').addClass('drophandle').draggable({ 
     connectToSortable: '#dropHere', 
     cursorAt: { top: 15, left: 225 }, 
     helper: function() { return $('#ct')[0]; } 
    }); 

});

http://jsbin.com/igohod/25

Źródło

2012-01-03 12:44:44 bardiir

Rozpocząć przeciąganie z innym elementem

Odpowiedz

Powiązane problemy