Hallo zusammen habe jetz mal ein Script gefunden wie man Layer verschieben kann, kämpfe aber da noch mit einigen Problemen... Hier mal das Script
CODE <style>
.draggableElement {
position: absolute;
}
</style>
<script>
var selectedElement;
function findDraggableElement (target) {
if (document.layers) {
if (target.constructor == Document) {
for (var l = 0; l < document.layers.length; l++)
if (target == document.layers[l].document)
return document.layers[l];
}
else if (target.constructor == Image) {
for (var l = 0; l < document.layers.length; l++)
for (var i = 0; i < document.layers[l].document.images.length; i++)
if (target == document.layers[l].document.images[i])
return document.layers[l];
}
return null;
}
else if (document.all) {
do
if (target.className == 'draggableElement')
return target;
while ((target = target.parentElement));
return null;
}
else if (document.getElementById) {
do
if (target.className == 'draggableElement')
return target;
while ((target = target.parentNode));
return null;
}
}
function checkSelection (evt) {
if (document.layers) {
selectedElement = findDraggableElement (evt.target);
if (selectedElement) {
document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousemove = drag;
document.onmouseup = stopDrag;
}
}
else if (document.all) {
selectedElement = findDraggableElement (event.srcElement);
if (selectedElement) {
document.onmousemove = drag;
document.onmouseup = stopDrag;
}
}
else if (document.getElementById) {
selectedElement = findDraggableElement (evt.target);
if (selectedElement) {
document.onmousemove = drag;
document.onmouseup = stopDrag;
}
}
}
function drag (evt) {
if (document.layers) {
selectedElement.left = evt.pageX;
selectedElement.top = evt.pageY;
}
else if (document.all) {
selectedElement.style.posLeft = event.clientX;
selectedElement.style.posTop = event.clientY;
}
else if (document.getElementById) {
selectedElement.style.left = evt.clientX + 'px';
selectedElement.style.top = evt.clientY + 'px';
}
}
function stopDrag (evt) {
if (document.layers) {
document.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousemove = null;
document.onmouseup = null;
selectedElement = null;
}
else if (document.all || document.getElementById) {
document.onmousemove = null;
document.onmouseup = null;
selectedElement = null;
}
}
if (document.layers)
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = checkSelection;
if (document.all)
document.onselectstart = document.ondragstart = function () {
return false;
};
</script>
Nun habe ich das Problem, dass die verschiebbaren Elemente, welche durch class='draggableElement' erkennbar sind, keinen Platzhalter besitzen, dass heisst es wird alles nach oben verschoben und die verschiebare Box ist darüber gelegt. Wenn ich nun die position auf relative stelle, gibt es zwar einen Platzhalter dafür ist das mit dem verschieben ein bisschen komisch... Nun habe ich rausgefunden dass ich die Position wo der Layer sich zum Mauszeiger befindet hier verstellen kann.
CODE else if (document.all) {
selectedElement.style.posLeft = event.clientX;
selectedElement.style.posTop = event.clientY;
Aber das funktioniert auch nicht wirklich, weil es ja bei jeder Box die verschiebung anders ist.
Nun wollte ich fragen wie es möglich wäre, dass der Mauszeiger in der Box an der Stelle bleibt wo man darufklickt beim verschieben. Nicht, dass sich die Box beim Klick ein bisschen verschiebt und man dann das ganze verschieben kann?
Um beim verschieben, dass ganze Transparent zu machen, kann ich da in Javascript Code dass ändern, dass dann sobald man die Box verschiebt es Transparent wird. Ich hatte es irgendwie nicht hingebracht entweder war es immer Transparent oder nie....
Wenn nun eine Box aus drei div Elementen besteht, und ich will, dass alle miteinander verschoben werden, ist dann die einzige Lösung eine Box um die drei herum zu erstellen?
Hm ich denke mal das sind genug fragen fürs erste, hoffe mal jemand versteht sie
Greetz
weissNix
