Verschibbare div "box"

Eddy-G · 22.03.2013

Hallo,

ich habe hier ein code, womit User Div contener ( Box) per Maus verschieben können.

----------------------------------------------

Code:

HTML:

<!doctype html>
<html>

<head>
  <title>Titel</title>

  <meta charset="ISO-8859-1" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />

<style type="text/css">

div#dragBox {
  position: absolute;
  top: 50px;
  left: 50px;

  width: 130px;
  background-color: #000000;

  cursor: move;
}

div#dragBox h3 {
  margin: 0;
  height: 25px;
  padding: 0;

  color: #F0F0F0;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 25px;
}

div#dragContBox {
  margin: 2px;
  background-color: #C0C0C0;
  padding: 5px;

  font-size: 12px;

  cursor: default;
}

</style>

<script language="javascript" type="text/javascript">

  var dragEle = null;

  var eleX = 0;
  var eleY = 0;

  var mouseX = 0;
  var mouseY = 0;

  document.onmousemove = move;
  document.onmouseup   = dragStop;


  function dragStart(element)
  {

    dragEle = element;
    eleX = mouseX - dragEle.offsetLeft;
    eleY = mouseY - dragEle.offsetTop;

  }


  function dragStop()
  {

    dragEle=null;

  }


  function move(dragEvent)
  {

    mouseX = document.all ? window.event.clientX : dragEvent.pageX;
    mouseY = document.all ? window.event.clientY : dragEvent.pageY;

    if(dragEle != null)
    {

      dragEle.style.left = (mouseX - eleX) + "px";
      dragEle.style.top = (mouseY - eleY) + "px";

    }

  }

</script>

</head>

<body>

  <div id="dragBox" onmousedown="dragStart(this);">

    <h3>&Uuml;berschrift</h3>

    <div id="dragContBox">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
    </div>

  </div>

</body>
</html>

-----------------------------------------

Das funktioniert auch!!!

Ich würde aber gerne 2 Sachen noch einfügen.

1. Wenn ein User das box verschiebt, soll er nur in einer gewissen div Bereich verschieben können.

2. Wenn in div "box" ein Link (URL) ist und der User drauf klickt, soll der Box nicht wider auf sein ursprüngliches Position springt.

Könnt ihr mir da helfen ??

Ich habe schon so was in jquery gesehen http://jqueryui.com/sortable/#portlets

Jedoch möchte ich das nicht verwenden.

Lg Eddy

P.S.: Sorry wenn ich in ein falsches Bereich gepostet habe, aber es ist ja auch java vorhanden nicht nur HTML und CSS

Duddle · 22.03.2013

AW: Verschibbare div "box"

1. Wenn ein User das box verschiebt, soll er nur in einer gewissen div Bereich verschieben können.

Du meinst sicher, dass du ein <div> als Begrenzer hast. Oder willst du es nur zulassen, dass der Nutzer das verschiebbare <div> in einem gewissen <div> loslassen kann?
Für ersteres ist das Prinzip simpel: du liest oder berechnest von dem Bereich die Begrenzungen und prüfst beim Verschieben ob die Position innerhalb dieser Grenzen ist. Wenn nicht, ignorierst du diese Bewegung.

2. Wenn in div "box" ein Link (URL) ist und der User drauf klickt, soll der Box nicht wider auf sein ursprüngliches Position springt.

Du hast kein <div> namens "box", nur zwei die "Box" im Namen haben. Wenn ich im Text von dragContBox einen Link einfüge und klicke, verschiebt sich die Box bei mir nicht. Was genau meinst du also?

Duddle

Eddy-G · 22.03.2013

AW: Verschibbare div "box"

Hallo,
danke für deine Antwort!

ich will nur zulassen, dass der Nutzer das verschiebbare <div> in einem gewissen <div> loslassen kann.

jedoch habe ich das Problem, das ich mich in java nicht auskenne und aus diesem Grund euch zu Hilfe gebeten habe.

-----

Jop, ich meine, wenn ein URL in "dragContBox" ist und man drauf klickt, kommt der box auf sein ursprünglichen Position zurück,
bzw... kann man auch sagen, wenn die Seite neu geladen wird, kommt der box in seiner ursprünglichen Position zurück und das will ich nicht.

LG Eddy

DANKE für eure/deine Hilfe.

Duddle · 22.03.2013

AW: Verschibbare div "box"

ich will nur zulassen, dass der Nutzer das verschiebbare <div> in einem gewissen <div> loslassen kann.

Dann musst du beim Loslassen die Begrenzung mit der neuen Position vergleichen. Wenn die nicht drin liegt, ignorierst du das Loslassen.

bzw... kann man auch sagen, wenn die Seite neu geladen wird, kommt der box in seiner ursprünglichen Position zurück und das will ich nicht.

Da müsstest du Cookies oder HTML5-Bordmittel nutzen, anders kannst du sitzungsübergreifend keine Daten sinnvoll speichern.

jedoch habe ich das Problem, das ich mich in java nicht auskenne und aus diesem Grund euch zu Hilfe gebeten habe.

Aber du hast doch schon einiges an Code stehen? Wenn der nicht von dir ist, dann lies dich erstmal so weit ein, dass du ihn verstehst (nicht verwechseln: es ist JavaScript, nicht Java). Danach siehst du auch Ansätze zu den genannten Fragen.
Falls du bei einem bestimmten Code-Abschnitt Probleme hast, immer her damit.

Duddle

sensations · 23.03.2013

AW: Verschibbare div "box"

Ich schlage immer ein am Rand der Webseite aufgelistetes Thema auf, wenn ich es interessant finde. Heute bin ich auf Deines gestoßen:
Ich habe vor einiger Zeit schon mal mit jQuery gebastelt. Schau Dir das mal an, da ist das Problem schon als Dragg'nDrop-Funktion gelöst.

Eddy-G · 24.03.2013

AW: Verschibbare div "box"

Hallo sensations, genau da ist das hacken!

Ich darf nicht jquery benutzen sonst würde ich das benutzen

http://jqueryui.com/sortable/#portlets

Lg