"absolut" an Rastern anpassen

[PiCNeTRoX]

Hi Leute

ich brauche eure Hilfe. Ich habe einen Code um bestimmte Textelemente mit der Maus verschieben zu können. Ich möchte jedoch gerne eine interne Tabelle erstellen, bei der man die Teams mittels drag& drop (= für das dient der Code) zu den verschiedenen Spielplänen hinziehen kann. Nun sollte dies natürlich gut aussehen und da kommt mein Problem: Mit diesem Code kann ich zwar die Textelemente überall hinziehen, aber könnte man ein Raster einrichten, damit die Textelemente nur auf eine bestimmte Fläche hinplatziert werden können? (z.B. "Team A" mächte ich in die grüne Box ziehen und dass sich dann das auch automatisch ausrichtet - sonst muss ich von Hand alle Textelemente auf Pixelgenau ausrichten).

Liebe Grüsse,
PiCNeTRoX

<style>
.draggableElement {
  position: absolute;
}
#d1 {
  border: 2px solid green;
}
#d2 {
  top: 0px; left: 300px;
}
</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>

<div id="d1" class="draggableElement">
TABELLENPLAN
</div>

 

[mihawk]

Ist zwar schon alt, aber ich habe den Artikel erst jetzt gesehen, wo ich selber diese thematik brauche. erstmal danke für das skript! ich habe es mit den folgenden modifizierungen beispielsweise so angepasst, dass der divcontainer beim absetzten an jedes vielfache von hundert, also ein hundert-pixel-raster angepasst wird. wenn du die koordinaten der zielspalten an dein skript übermittelst, sollte sich ein entsprechendes raster anlegen lassen...

function stopDrag (evt) {
  if (document.layers) {
    document.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
    selectedElement.left = floor(evt.pageX/10)*10;
    selectedElement.top = evt.pageY;
    document.onmousemove = null;
    document.onmouseup = null;
    selectedElement = null;
  }
  else if (document.all) {
    selectedElement.style.posLeft = selectedElement.style.posLeft - (selectedElement.style.posLeft%100);
    selectedElement.style.posTop = selectedElement.style.posTop - (selectedElement.style.posTop % 100);
    document.onmousemove = null;
    document.onmouseup = null;
    selectedElement = null;
  }
  else if (document.getElementById) {
    selectedElement.style.left = (selectedElement.style.left - (selectedElement.style.left % 100) + 'px;';
    selectedElement.style.top = (selectedElement.style.top - (selectedElement.style.top % 100)) + 'px;';
    document.onmousemove = null;
    document.onmouseup = null;
    selectedElement = null;
  }
}