JqueryUI, Elemente in Zellen eines scrollenden droppable div mit großer Tabelle ziehen

Question

Ich bin mit einem Drag/Drop-Problem konfrontiert.

Ich möchte immer das Element sehen, das gezogen wird, und ich möchte in der Lage sein, ein bestimmtes div zu scrollen, um das Element in eine beliebige Zelle meiner Tabelle fallen zu lassen. Ich möchte auch in der Lage sein, Element von jedem Div zu jedem Div zu ziehen.

Dieses Beispiel funktioniert fast gut. Mein letztes Problem ist über die Zelle hoverClass Eigenschaft: Wenn ich ein Element aus dem "Container A" in der Nähe der Grenze des "Container B" ziehen, implementiert ich ein Auto-Scroll-Verhalten in meiner Tabelle navigieren, um beliebige Zellen zu erreichen. Aber nach der Scroll-Simulation gilt die hoverClass nicht für die rechte Zelle. Das Element wird jedoch immer in die rechte Zelle eingefügt.

https://jsfiddle.net/Bouillou/QvRjL/434/

Ist mein Ansatz richtig?

EDIT

fand ich eine Abhilfe. Die Idee besteht darin, den Elementklon während des Hilfskonstruktionsrückrufs an den bildlauffähigen Container anzuhängen und dann den Helper nach 1 ms mit einer setTimeout-Funktion an den Rumpf anzuhängen. Die Helferposition muss auf die Mausposition abgebildet werden, um ein Offset-Problem zu vermeiden.

Hier ist meine endgültige Lösung: https://jsfiddle.net/Bouillou/QvRjL/434/

Ich bin sicher, dass es möglich ist, eine beste Weise zu entwickeln, das zu tun.

Answer 1

Offenbar ist mein Update die einzige Lösung.

Es funktioniert seit Monaten jetzt ohne Problem.

Ich habe einen Workaround gefunden. Die Idee ist, den Element-Klon an den scrollbaren Container anzuhängen, während der Helfer-Construction-Callback, und dann den Helfer mit einer setTimeout-Funktion nach 1 ms an den Body anzufügen. Die Helferposition muss auf die Mausposition abgebildet werden, um ein Offset-Problem zu vermeiden.

Hier ist meine Lösung: http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() { 
    $(this).draggable({ 
     opacity: 0.7, 
     cursorAt: { top: 15, left: 50 }, 
     appendTo: 'body', 
     containment: 'body',   
     scroll: true, 
     helper: function(){ 
      //Hack to append the cartridge to the body (visible above others divs), 
      //but still bellonging to the scrollable container 
      $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>'); 
      $("#clone").hide(); 
      setTimeout(function(){ 
       $('#clone').appendTo('body'); 
       $("#clone").show(); 
      },1); 
      return $("#clone"); 
     }  
    }); 
});​ 

Answer 2

Wenn ich richtig undestand, nachdem Sie blättern, ist der highlitedcells nicht die richtigen ..

mir scheint, dass es die Zelle calcualtes von Ihrem Containerelement zu markieren, aber dann de Position innerhalb des Tabellenelementes replizieren.

Einfach nach dem Offset der Maus aus dem 'container2' suchen und dann die Zelle am Offset aber von der Tabelle 't' positionieren.

Nutzen Sie die Gelegenheit und verwenden Sie die Position anstelle des Offsets. und erwähnte auf http://api.jquery.com/offset/,

Die .Offset() Methode ermöglicht es, die aktuelle Position eines Elements relativ zu dem Dokument abzurufen. Vergleichen Sie dies mit .position(), , die die aktuelle Position relativ zum Offset-Parent abruft.

Persönlich würde ich einfach eine CSS-Klasse auf die Zellen anwenden und css: hover verwenden./EDIT: Wenn der einzige Grund dafür ist, die Zelle hervorzuheben .. Vielleicht möchtest du auch andere Dinge auslösen.