Arrastrando y soltando en un elemento escalado

Tengo un elemento div que quiero poder arrastrar a un elemento escalado. Sin embargo, cuando hago esto, el elemento div no va a las coorderadas correctas del elemento, pero sí cuando lo arrastro por segunda vez.

También creo que se amplía cuando se agrega el elemento get, que quiero probar y evitar.

¿Alguien puede ayudarme a arreglar esto? (especialmente el todo no va al lugar correcto)

He intentado cosas como esta para get las coorderadas reales del div, pero no estoy seguro de cómo traducir eso al elemento arrastrable, ya que mousemove no funciona cuando estoy arrastrando algo.

 $("body").on("mousemove", ".formBackground", function(e){ div_x = (e.offsetX != null) ? e.offsetX : e.originalEvent.layerX; div_y = (e.offsetY != null) ? e.offsetY : e.originalEvent.layerY; console.log("x "+div_x+" y "+div_y); }); 

Aquí está mi código real y un enlace a mi JSFIDDLE

HTML

 <div id="drag1" class="drag" style="font-size:12px;background-color:#E2F4FE;width:220px;padding:10px;color:#000;font-weight:normal;">New box</div> <br /> <br /> <div id="formBox"> <div id="formScale"> <div class="formContent"> <div class="formBackground" style="background-image:url('http://img.javascriptes.com/javascript/roOQNaS.png');"></div> </div> </div> </div> 

JS

 var percent = 1.5; $("#formScale").css({ 'transform': 'scale(' + percent + ')', '-moz-transform': 'scale(' + percent + ')', '-webkit-transform': 'scale(' + percent + ')', '-ms-transform': 'scale(' + percent + ')' }); var counter = 0; //Make element draggable $(".drag").draggable({ helper: 'clone', containment: 'frame', //When first dragged stop: function (ev, ui) { var pos = $(ui.helper).offset(); objName = "#clonediv" + counter $(objName).css({ "left": pos.left, "top": pos.top }); $(objName).removeClass("drag"); //When an existiung object is dragged $(objName).draggable({ containment: 'frame', stop: function (ev, ui) { var pos = $(ui.helper).offset(); console.log($(this).attr("id")); console.log(pos.left) console.log(pos.top) } }); } }); $(".formBackground").droppable({ drop: function (ev, ui) { if (ui.draggable.attr('id').search(/drag[0-9]/) != -1) { counter++; var element = $(ui.draggable).clone(); element.addClass("tempclass"); $(this).append(element); $(".tempclass").attr("id", "clonediv" + counter); $("#clonediv" + counter).removeClass("tempclass"); //Get the dynamically item id draggedNumber = ui.draggable.attr('id').search(/drag([0-9])/) itemDragged = "dragged" + RegExp.$1 console.log(itemDragged) $("#clonediv" + counter).addClass(itemDragged); } } }); 

CSS

 #formBox { position:relative; } #formScale { border:1px solid networking; position:relative; width:350px; height:200px; margin:0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; -ms-transform-origin: 0 0; } .formContent { position:absolute; width:100%; height:100%; } .formBackground { width:100%; height:100%; background-size:contain; background-position:center; background-repeat:no-repeat; } 

  • jQuery UI: comportamiento que se puede arrastrar al soltar objects con tolerancia táctil
  • Zona extraíble de jQuery en la zona desplegable
  • Descenso preciso del elemento arrastrable en div escalado
  • Jquery arrastrable / desplegable y clasificable combinado
  • jquery ui out: la function no se activa
  • jQuery droppable - recibir events durante el arrastre (no solo en el arrastre inicial)
  • JQuery UI ¿Arrastra / suelta con múltiples ámbitos?
  • Desplazamiento de mouse inválido para cross-frame arrastrable + orderable
  • One Solution collect form web for “Arrastrando y soltando en un elemento escalado”

    Si entiendo tu objective correctamente, hay una serie de cosas de las que debes ocuparte.

    1. La position relativa

    Cuando el padre de un elemento HTML cambia (es decir, el elemento se agrega a otro elemento), su position en la pantalla cambia, a less que su propiedad de position sea fixed (que no es la pnetworkingeterminada).
    Entonces, cuando anexa su div a $('.formBackground') (lo llamaré formBackground ), su position se vuelve relativa a su hermano anterior, o, si no hay hermanos anteriores, a formBackground sí mismo.
    Para formBackground esto, debe restar el desplazamiento de formBackground del desplazamiento del arrastrable.
    Además, debe establecer la position en absolute , por lo que el arrastre siempre se representa en relación con formBackground lugar de arrastrar el anterior.

    La propiedad de position CSS se explica aquí .

    Para hacer eso, elimina este pasaje (líneas 19-22 en tu violín):

     $(objName).css({ "left": pos.left, "top": pos.top }); 

    Y en su lugar, agregue el siguiente pasaje después de element.addClass("tempclass"); (actualmente línea 43):

     element.css({ "position": "absolute", "left": ui.offset.left - $(this).offset().left, "top": ui.offset.top - $(this).offset().top }); 

    El siguiente punto a cuidar es:

    2. La escala de desplazamiento

    Si ahora configuraras var percent = 1.0; en la línea 1, el arrastrable debe permanecer exactamente donde está.
    Sin embargo, con cualquier otro factor, no lo hará, ya que su compensación se multiplica también.

    La propiedad de transform CSS y su valor de scale() se explican aquí , sin embargo, la documentation no menciona que esto también se aplica al desplazamiento de un object, simplemente parece ser de esa manera.

    Simplemente edite el fragment de arriba para dividir entre la left y la top por percent :

     element.css({ "position": "absolute", "left": (ui.offset.left - $(this).offset().left) / percent, "top": (ui.offset.top - $(this).offset().top) / percent }); 

    Ahora, la esquina superior izquierda del elemento que se puede arrastrar siempre debe permanecer donde lo suelta, independientemente del percent establecido.

    Bifurqué y edité tu violín para reflejar estos dos cambios. Como aún no tengo una reputación de 10, no puedo publicar más de 2 enlaces, pero aquí está de todos modos: http://jsfiddle.net/n7yns9eq/2/

    3. (Opcional) La transformación anclada en la parte superior izquierda

    Me resulta un poco más fácil de usar para hacer que el "punto de reference" para los elementos de su centro en lugar de su esquina superior izquierda. Me parece más intuitivo. Si también lo encuentras, esta es la forma de hacerlo:

    Desde la left / top tienes que restar la mitad de la cantidad por width / height boostá. En codigo:

     element.css({ "position": "absolute", "left": (ui.offset.left - $(this).offset().left - $(ui.draggable).width() * (percent - 1) / 2) / percent, "top": (ui.offset.top - $(this).offset().top - $(ui.draggable).height() * (percent - 1) / 2) / percent }); 

    Tenga en count que en lugar de $(ui.draggable) no puede usar el element porque el element no se ha procesado en este punto y dado que no tiene un valor explícito establecido para height , element.height() devolverá 0 .

    Fiddle: http://jsfiddle.net/9xbgqdeo/1/

    4. Zonas muertas y movimiento no proporcional

    Otro problema que noté fue que ahora, si sueltas un arrastrable en el tercio inferior izquierdo de formBackground , la caída no ocurre. No sé si esto es causado por el motor del browser (no cambiar el tamaño del área funcional de un object) o por jquery (sin tener en count las transformaciones).
    La única forma en que se me ocurre formBackground este problema es hacer que el body desplegable en lugar de formBackground , comtesting si está dentro de los límites de formBackground y, en caso afirmativo, formBackground allí, descartarlo de lo contrario.
    Tenga en count que para que esto funcione si su página no llena toda la window del browser, debe establecer el siguiente CSS:

     html, body { width: 100%; height: 100%; } 

    Y no se olvide de replace todo this en la function que se puede $('.formBackground') con $('.formBackground') .

    Además, cuando formBackground un object arrastrable existente de formBackground y lo formBackground , se aleja del cursor, lo cual considero no deseado. Para evitar esto, sugiero mover el div a su padre original y revertir los cambios de compensación que se hicieron cuando se descartó en formBackground .

    Honestamente soy demasiado perezoso para proporcionar violines para esos dos cambios ahora (edit: http://jsfiddle.net/gtc17z6b/1/ ), pero espero que esto resuelva tu pregunta de todos modos.

    Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.