Jquery drag drop

[baws]

Hallo,

Ik heb een site med 2 hoofd divs.
een links fixed 80% en een rechts van 20 % fixed.
in de rechter div heb ik een lijst met afbeeldingen .
deze wil ik naar de div links slepen.
en als ze links zijn dat ze in de div link komen te staan.
ik print de inhoud van de linker div dus als hij alleen qua uiterlijk er staat is het niet goed.
het gaat om de volgende pagina. lin alle code jquery enz is te bekijken in de broncode, ik heb geen exteren bestanden gebruikt.

ze moeten dus net zo worden als de twitter icons.
als je nu op print drukt print hij die wel.
Iemand een idee?

 

[csshunter]

Hoi baws,

Ik heb een site met 2 hoofd divs, één links fixed 80% en één rechts van 20 % fixed.

Dat lijkt me niet zo'n goed idee: dan kan de bezoeker niet scrollen, wat nodig is om alles te kunnen zien op kleinere beeldschermen, bijvoorbeeld op een klein tablet:

Bij kleinere formaten gaat het helemaal mis.
Maar ook op grotere formaten: op een groot tablet van 1024*768px lukt het ook niet.
En zelfs op een resolutie van 1280*1024px zijn er maar 10 van de 16 afbeeldingen rechts te zien!

• Er treedt daarnaast ook vervorming op in de verhoudingen van de thumbnails.

=======
Nu de vraag!

De nattigheid is, dat de Drag&Drop functie van jQuery wel dragt, maar niet echt dropt. Het droppen is het bevriezen van de drag, d.w.z. de drag is een verplaatsen vanaf de <div> waar het element in zit - en dat blijft zo. Alleen de positie wordt versleept (left: -...px e.d.), maar de html-stuctuur van het element verandert niet.
De thumbnail komt dus wel binnen de afmetingen van de linker-div, maar dat is slechts schijn: hij wordt niet echt omgezet naar binnen die div. Vandaar dat er niks komt als je 'm gaat printen.
Maar dat wist je waarschijnlijk al.

• Als ik de drag-drop voorbeelden ga bekijken (bv. deze serie), dan zit er geen één bij die een element echt dropt in een andere div.
• Ook in de Draggable en Droppable pagina's van jQuery is daar niets over te vinden, net zo min als in de jQuery UI - API voor de Droppable widget.
• Het lijkt er op, dat deze functie gewoon niet zit ingebouwd.

Kan het dan niet?
Ik denk dat het toch kan, op twee manieren:

1. Via het drop-event kan je de x- en de y-positie van dat moment opvragen. Die zou je kunnen gebruiken in een aanvullend javascript, dat op de onmouseup na het droppen reageert.
   D.w.z. de x/y posities ten opzichte van de rechter-div krijgen een omzetting naar de x/y posities ten opzichte van de linker-div, en daarmee wordt een nieuw element met het img aangemaakt in de linker-div; tegelijkertijd wordt de oude thumb vernietigd. Zo staat ie echt in de linker-div, en kan dan ook meegeprint worden.
2. Andere manier zou kunnen zijn: niet de rechter-div op {display:none} zetten voor het printen (= inclusief de ge-drag/dropte images), maar het print-oppervlak (= de body-breedte of iets dergelijks) beperken tot de breedte van de linker-div; eventueel met een {overflow: hidden;} erbij. De rechter-div wordt dan niet geprint, maar de uit de rechter-div gesleepte thumbs wel.

Met vriendelijke groet,
CSShunter

 

[baws]

Van het scrollen dat klopt, dat is om te testen.
als ik nu overflow:auto aan zet kan ik de afbeeldingen niet naar het bord slepen.

Ik ben al iets verder.

$("#bord").droppable({
accept: ".verplaats",
drop: function (event, ui) {
ui.draggable.clone(false).removeClass('ui-resizable verplaats ui-draggable').addClass('clone').appendTo($(this)).draggable();
}
});

met de functie append kan ik een afbeelding droppen in de andere div, echter krijgen deze een vaste positite.
het klinkt raar want je kan ze wel slepen.
echter als je 1 afbeelding gedropt hebt krijgt deze bijvoorbeeld de positie
1

de 2e krijgt de volgende positie
1
2

ze komen onder elkaar als 1 en 2 gesleept zijn komt 3 nog op de positie waar 3 orgineel zal komen
1
2
3

de volgorde wordt dan
leeg
leeg
3

de 4e afbeelding wordt dan op een positie geplaatst die niet in het bord valt en is niet meer te zien/slepen.