Arrastre de inicio con otro elemento

¿es posible iniciar el arrastre con otro elemento?Arrastre de inicio con otro elemento

Por ejemplo: http://jsbin.com/igohod/edit#preview

Quiero empezar a arrastrar #ct cuando hago clic en el #icon. En particular, #icon no desciende de #ct en el árbol 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(); 
});

ACTUALIZACIÓN:
Nueva ejemplo, con sortable
http://jsbin.com/igohod/8/edit#preview

Solución
http://jsbin.com/igohod/13/edit#preview

Fuente

2011-12-26 user970727

Esto funciona, pero siempre lo añade al final de la lista:

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

También he añadido el estilo CSS y dejó caer la anidados etiquetas div:

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

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

Fuente

2011-12-28 15:51:58 shaun5

Creo que la razón por la que el nuevo div solo aparece en la parte inferior del div ordenable es que las coordenadas del mouse y el nuevo div nunca están en el div ordenable juntas ... – shaun5

Estaba en lo correcto. Si el div se mueve al cursor, ordenable funciona normalmente. http://jsbin.com/igohod/11/ – shaun5

Perfekt! Acabo de agregar cursorAt: '{top: 15, left: 225}' al ejecutable y funciona realmente bien! – user970727

Aquí es una solución posible:

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

Sólo actualizar los valores de la izquierda y arriba de #ct cuando se mueve el icono de alrededor.

Fuente

2011-12-26 09:43:05 kufi

No quiero cambiar la posición del icono:/... Gracias por la rápida respuesta. – user970727

Ah, vale. Aquí hay una solución: http://jsbin.com/igohod/5 – kufi

Lo siento, mi ejemplo no fue tan bueno. Quiero dejar el #ct en una lista ordenable. Esa es la razón por la que trato de "iniciar" el draggble con otro elemento. aquí hay un ejemplo: http://jsbin.com/igohod/6/edit#javascript,html – user970727

Otra posible solución que utiliza un ayudante para encapsular el objeto que se puede arrastrar. De esta forma, no es necesario atrapar ningún evento del mouse ni establecer ninguna posición arbitraria. jQuery se encarga de esto.

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

Fuente

2012-01-03 12:44:44 bardiir

Arrastre de inicio con otro elemento

Respuesta

Cuestiones relacionadas