Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Verschibbare div "box"“

Eddy-G

Nicht mehr ganz neu hier

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
 
Zuletzt bearbeitet von einem Moderator:

Duddle

Posting-Frequenz: 14µHz

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

Nicht mehr ganz neu hier

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

Posting-Frequenz: 14µHz

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
 
S

sensations

Guest

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.153
Beiträge
2.581.847
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben