Hi Leute.
Folgendes Script bewirkt, dass man ein Div verschieben und neu skalieren kann.
Leider ist das Problem, dass wenn ich nun das Div neu skaliere, es auch mit verschoben wird, weil ich ja dazu in das Div klicken muss.
Wie könnte ich dieses Problem lösen??
hier mal der Code:
Ich habe das Script auch hochgeladen, unter der URL webcrawler. bplaced. net / maus . php
Ich hoffe ihr versteht das Problem und habt villeicht einen Lösungsansatz für mich?
Vielen Dank schonmal....
Folgendes Script bewirkt, dass man ein Div verschieben und neu skalieren kann.
Leider ist das Problem, dass wenn ich nun das Div neu skaliere, es auch mit verschoben wird, weil ich ja dazu in das Div klicken muss.
Wie könnte ich dieses Problem lösen??
hier mal der Code:
HTML-Quellcode
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>multitab</title>
- <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
- <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
- <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
- <link rel="stylesheet" href="/resources/demos/style.css" />
- <script>
- var objDrag = null; // Element, über dem Maus bewegt wurde
- var mouseX = 0; // X-Koordinate der Maus
- var mouseY = 0; // Y-Koordinate der Maus
- var offX = 0; // X-Offset der Maus zur linken oberen Ecke des Elements
- var offY = 0; // Y-Offset der Maus zur linken oberen Ecke des Elements
- IE = document.all&&!window.opera;
- DOM = document.getElementById&&!IE;
- function init(){
- document.onmousemove = doDrag;
- document.onmouseup = stopDrag;
- }
- function startDrag(objElem) {
- objDrag = objElem;
- offX = mouseX - objDrag.offsetLeft;
- offY = mouseY - objDrag.offsetTop;
- }
- function doDrag(ereignis) {
- mouseX = (IE) ? window.event.clientX : ereignis.pageX;
- mouseY = (IE) ? window.event.clientY : ereignis.pageY;
- if (objDrag != null) {
- objDrag.style.left = (mouseX - offX) + "px";
- objDrag.style.top = (mouseY - offY) + "px";
- window.status = "Box-Position: " + objDrag.style.left + ", " + objDrag.style.top;
- }
- }
- function stopDrag(ereignis) {
- objDrag = null;
- }
- $(function() {
- $( "#divID2" ).resizable();
- });
- </script>
- <style type="text/css">
- .isResizable {
- background: rgba(255, 0, 0, 0.2);
- font-size: 2em;
- border: 1px solid black;
- overflow: hidden;
- resize: both;
- width: 160px;
- height: 120px;
- min-width: 120px;
- min-height: 90px;
- max-width: 400px;
- max-height: 300px;
- }
- </style>
- <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
- <title>Div-Container mit Maus bewegen</title>
- <script language="JavaScript" src="drag_drop.js" type="text/javascript"></script>
- </head>
- <body onload="init();" >
- <div id="divID2" style="width:150px; height:150px; border: 3px solid #000;" class="isResizable" onmousedown="startDrag(this);">
- Zweite Box!
- </div>
- </body>
- </html>
Ich habe das Script auch hochgeladen, unter der URL webcrawler. bplaced. net / maus . php
Ich hoffe ihr versteht das Problem und habt villeicht einen Lösungsansatz für mich?
Vielen Dank schonmal....