Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Eddy-G" data-source="post: 2145619" data-attributes="member: 66143">Hallo,ich habe hier ein code, womit User Div contener ( Box) per Maus verschieben können.----------------------------------------------Code: [HTML]&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&nbsp; &lt;title&gt;Titel&lt;/title&gt;&nbsp; &lt;meta charset=&quot;ISO-8859-1&quot; /&gt;&nbsp; &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;&nbsp; &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;&nbsp; &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;&lt;style type=&quot;text/css&quot;&gt;div#dragBox {&nbsp; position: absolute;&nbsp; top: 50px;&nbsp; left: 50px;&nbsp; width: 130px;&nbsp; background-color: #000000;&nbsp; cursor: move;}div#dragBox h3 {&nbsp; margin: 0;&nbsp; height: 25px;&nbsp; padding: 0;&nbsp; color: #F0F0F0;&nbsp; font-size: 14px;&nbsp; font-weight: bold;&nbsp; text-align: center;&nbsp; line-height: 25px;}div#dragContBox {&nbsp; margin: 2px;&nbsp; background-color: #C0C0C0;&nbsp; padding: 5px;&nbsp; font-size: 12px;&nbsp; cursor: default;}&lt;/style&gt;&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;&nbsp; var dragEle = null;&nbsp; var eleX = 0;&nbsp; var eleY = 0;&nbsp; var mouseX = 0;&nbsp; var mouseY = 0;&nbsp; document.onmousemove = move;&nbsp; document.onmouseup&nbsp;&nbsp; = dragStop;&nbsp; function dragStart(element)&nbsp; {&nbsp; &nbsp; dragEle = element;&nbsp; &nbsp; eleX = mouseX - dragEle.offsetLeft;&nbsp; &nbsp; eleY = mouseY - dragEle.offsetTop;&nbsp; }&nbsp; function dragStop()&nbsp; {&nbsp; &nbsp; dragEle=null;&nbsp; }&nbsp; function move(dragEvent)&nbsp; {&nbsp; &nbsp; mouseX = document.all ? window.event.clientX : dragEvent.pageX;&nbsp; &nbsp; mouseY = document.all ? window.event.clientY : dragEvent.pageY;&nbsp; &nbsp; if(dragEle != null)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; dragEle.style.left = (mouseX - eleX) + &quot;px&quot;;&nbsp; &nbsp; &nbsp; dragEle.style.top = (mouseY - eleY) + &quot;px&quot;;&nbsp; &nbsp; }&nbsp; }&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&nbsp; &lt;div id=&quot;dragBox&quot; onmousedown=&quot;dragStart(this);&quot;&gt;&nbsp; &nbsp; &lt;h3&gt;&amp;Uuml;berschrift&lt;/h3&gt;&nbsp; &nbsp; &lt;div id=&quot;dragContBox&quot;&gt;&nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.&nbsp; &nbsp; &lt;/div&gt;&nbsp; &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/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 &quot;box&quot; 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&nbsp; <a href="http://jqueryui.com/sortable/#portlets" target="_blank">http://jqueryui.com/sortable/#portlets</a> Jedoch möchte ich das nicht verwenden.Lg EddyP.S.: Sorry wenn ich in ein falsches Bereich gepostet habe, aber es ist ja auch java vorhanden nicht nur HTML und CSS</blockquote>

[QUOTE="Eddy-G, post: 2145619, member: 66143"] 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>Ü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>[/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 [URL]http://jqueryui.com/sortable/#portlets[/URL] 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 [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?