Sastan,
FleXcroll is using a div with overflow:hidden and as I tried to
explain in my previous post you will run into this clipping issue with
any draggable element within a parent that has overflow set to
anything other than visible.
(http://www.w3schools.com/css/pr_pos_overflow.asp)
If you study flickr's organizer implementation they are moving the
images and not the clip region of the parent element and avoid the
need for any of the mess you are about to tackle. I still recommend
you work on a solution that allows scrolling/pagination with the
parent element set to overflow:visible.
With that said I have provided a snipping of code I have used to
solve a similar drag and drop problem as yours. Basically, I connected
the onclick signal for an image element that I want to be draggable to
the spawnDraggable method. It creates a draggable and attaches it to
the body of the document. At the same time it attaches the mouseup
event to destroy the draggable and element after calling endDrag. This
code works with an older rev of the MochiKit 1.4 and I doubt it will
work as is with the current rev, but you should get the idea of what
needs to happen to get the draggable element attached to a parent
element that is not going to clip it as it moves.
Best of luck,
Ken
ImageDraggable = {
draggable: null,
spawnDraggable: function (iEvent) {
var d = MochiKit.DOM;
var srcElement = iEvent.src();
var image = gImageDigest.getImageById(srcElement.id);
var thumbnail = image.getThumbnail();
var imgElement = thumbnail.newImgElement();
imgElement.setAttribute('class', 'thumbnail');
var bodyElement =
MochiKit.DOM.currentDocument().getElementsByTagName("body").item(0);
bodyElement.appendChild(imgElement);
var size = MochiKit.Style.getElementDimensions(imgElement);
var position = {x:iEvent.mouse().page.x-size.w/2,
y:iEvent.mouse().page.y-size.h/2};
MochiKit.Style.setElementPosition(imgElement, position);
imgElement.style.position = 'absolute';
imgElement.id = srcElement.id;
ImageDraggable.draggable = new
MochiKit.DragAndDrop.Draggable(imgElement, {endeffect:
MochiKit.Base.noop});
MochiKit.Signal.disconnect(MochiKit.DragAndDrop.Draggables.eventMouseUp);
MochiKit.DragAndDrop.Draggables.eventMouseUp =
MochiKit.Signal.connect(imgElement, 'onmouseup', ImageDraggable,
ImageDraggable.onmouseup);
ImageDraggable.draggable.initDrag.apply(ImageDraggable.draggable,
Array(iEvent));
ImageDraggable.draggable.updateDrag.apply(ImageDraggable.draggable,
Array(iEvent, iEvent.mouse()));
},
onmouseup: function (iEvent) {
ImageDraggable.draggable.endDrag.apply(ImageDraggable.draggable,
Array(iEvent));
MochiKit.DOM.removeElement(ImageDraggable.draggable.element);
ImageDraggable.draggable.destroy.apply(ImageDraggable.draggable,
Array(iEvent));
}
};
On 1/2/07, sastan <[EMAIL PROTECTED]> wrote:
Hi Ken,
i tried the second solution and used an implentation from
http://www.hesido.com/web.php?page=customscrollbar but it didn't worked
either. The same problem showed up.
Your third option seems to be the only possible solution. It would be
nice if you could send me some code to start.
Thanks
sastan
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to mochikit@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/mochikit?hl=en
-~----------~----~----~----~------~----~------~--~---
