[Erledigt] Drag and Drop script

Moewe · 17.01.2012, 14:31

Hallo,

ich weiß nicht ob jemand dieses script:
http://javascript.jstruebig.de/js/dragObject.js
kennt, ich hoffe es.
Habe follgenden Code:

PHP-Code:

  <?php

include "table.html";

?>

<head>

<script type="text/javascript" src="dragObject.js"></script>

<script type="text/javascript">

//var Drag = DragObject;

function getPos(o)

{

   for(var top = o.offsetTop, left = o.offsetLeft; o = o.offsetParent; top += o.offsetTop, left += o.offsetLeft) {}

   return [top, left];

}

window.onload = function()

{

   var ticketbox = document.getElementById('ticketallbox');

   var ticketbox_top = getPos(ticketbox)[0];

   var ticketbox_left = getPos(ticketbox)[1];

   var ticketbox_bottom = ticketbox.offsetHeight + ticketbox_top;

   var ticketbox_right = ticketbox.offsetWidth + ticketbox_left;

 
   var dragTicket = document.getElementById("dragObjekt");

 
   var tempTicket = new DragObject(dragTicket, dragTicket.childNodes[0])

   

   tempTicket.ondrag = function(e, top, left)

   {

      var drag_objekt = this.getPos();

      var is_in = (left>ticketbox_left> && (top>ticketbox_top) &&

                  (drag_objekt[2] + top<ticketbox_bottom) && (drag_objekt[3] + left<ticketbox_right);

      

      ticketbox.style.backgroundColor = is_in ? "white" : "red";

   };

 
};

</script>

</head>

<body>

   <div id="ticketallbox" class="drag">Ticketbox

      <div id="dragObjekt"><h3>Ticket</h3>

         <p><img src="ticket.jpg"></p>

         <p>Kunde X</p>

      </div>

   </div>

</body>

und die Html Datei:

HTML-Code:

<html>
<head>
<link href="test.css" type="text/css" rel="stylesheet">
</script>
</head>
<body>
   <div id="div-data">
      <table border="0">
         <tr>
            <td id='mitarbeiter' class="mitarbeiter">
               Arne
            </td>
            <td class="leer">
               <!--//leer-->
            </td>
            <td class="mitarbeiter">
               Dirk
            </td>
            <td class="leer">
               <!--//leer-->
            </td>
            <td class="Mitarbeiter">
               Thomas
            </td>
         </tr>
         <tr height="40px">
         </tr>
         <tr>
            <td class="mitarbeiter">
               Leonie
            </td>
            <td class="leer">
               <!--//leer-->
            </td>
            <td class="mitarbeiter">
               Sarah
            </td>
            <td class="leer">
               <!--//leer-->
            </td>
            <td class="Mitarbeiter">
               Max
            </td>
         </tr>
      </table>
   </div>
</body>
</html>

das Drag n Drop klappt super solange ich diesen Teil weg lasse:

PHP-Code:

     tempTicket.ondrag = function(e, top, left)

   {

      var drag_objekt = this.getPos();

      var is_in = (left>ticketbox_left> && (top>ticketbox_top) &&

                  (drag_objekt[2] + top<ticketbox_bottom) && (drag_objekt[3] + left<ticketbox_right);

      

      ticketbox.style.backgroundColor = is_in ? "white" : "red";

   };

Dieser Teil ist aber sehr wichtig für mich, da ich verstehen will, wie man prüft wo das Objekt grade ist.
Ich möchte nämlich gerne mein Ticket Objekt aus der Ticketbox, zu einem Mitarbeiter ziehen können, sodass später dieses Ticket ihm zugewiesen wird... Aber nunmal klein anfangen^^.

Ich bin aufjedenfall ratlos

Danke und freundliche Grüße

Sebastian

Solu · 17.01.2012, 14:35

Ich denke du löst das leichter mit Jquery
Drag&Drop

rudygotya · 17.01.2012, 14:39

Schau dir getBoundingClientRect an, das liefert dir die absolute Position eines Elements. offset liefert dir die Position im Vergleich zum ersten positionierten Elternelement.

Für eine komplette Implementierung siehe z.b. jquery position.

Grüße

Moewe · 17.01.2012, 14:51

Zitat:

Zitat von rudygotya

Schau dir getBoundingClientRect an, das liefert dir die absolute Position eines Elements. offset liefert dir die Position im Vergleich zum ersten positionierten Elternelement.

Für eine komplette Implementierung siehe z.b. jquery position.

Grüße

Hab nun das Script so verändert:

PHP-Code:

  window.onload = function()

{

   var ticketbox = document.getElementById('ticketallbox');

   var ticketbox_top = getPos(ticketbox)[0];

   var ticketbox_left = getPos(ticketbox)[1];

   var ticketbox_bottom = ticketbox.offsetHeight + ticketbox_top;

   var ticketbox_right = ticketbox.offsetWidth + ticketbox_left;

 
   var dragTicket = document.getElementById("dragObjekt");

 
   var tempTicket = new DragObject(dragTicket, dragTicket.childNodes[0])

   

   tempTicket.ondrop = function(e)

   {

      var nupos = this.getBoundingClientRect();

      alert(nupos);

   }

 
};

Allerdings gibt er mir keinen alert über die Neu Position

Solu · 17.01.2012, 15:28

Zitat:

Ich möchte nämlich gerne mein Ticket Objekt aus der Ticketbox, zu einem Mitarbeiter ziehen können, sodass später dieses Ticket ihm zugewiesen wird...

Mit Jquery (siehe Link oben) in Verbindung mit AJAX ist dass doch kein Thema. Wozu der ganze Code? Wenn du es so machst, erledigt Jquery die Arbeit. Du machst dich nur unnötig verrückt und hast mehr Arbeit als notwendig!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
drag und drop maus springt	Chacky	JavaScript, Ajax und mehr	8	03.01.2012 19:11
Drag and Drop	zorro69	JavaScript, Ajax und mehr	6	21.12.2011 18:08
JQuery drag n drop	EG2011	JavaScript, Ajax und mehr	2	01.06.2011 23:37
[Erledigt] JQuery Drag & Drop an Flashanimationen	Dopar	JavaScript, Ajax und mehr	7	26.03.2011 11:22
Drag and Drop - Frage	makaay04	JavaScript, Ajax und mehr	11	08.03.2011 18:50
Drag & Drop PHP und, oder HTML Editor gesucht	stemser	PHP Einsteiger	1	09.01.2011 16:22
Scriptsuche Slide-Fade Toogle mit Drag and Drop + Cookie Script gesucht	GN	Scriptbörse	1	09.01.2010 00:05
Drag and Drop	Volex	JavaScript, Ajax und mehr	7	02.01.2010 20:37
[Erledigt] Drag & Drop Koordinaten übergeben	HaWa-Services	JavaScript, Ajax und mehr	4	13.11.2009 00:18
Drag and Drop	SteiniKeule	Scriptbörse	5	14.08.2009 14:51
Drag and Drop mit PHP und MySQL	Torsten.E	PHP Tipps 2009	16	08.07.2009 17:16
Drag and drop	asdasd	Scriptbörse	3	18.05.2009 18:52
Drag & Drop Begrenzung	Maaax	JavaScript, Ajax und mehr	8	10.05.2009 17:13
Drag & Drop via JQuery & Ajax --> Geht nicht :(	Plague	JavaScript, Ajax und mehr	2	23.10.2008 12:19
[Erledigt] Drag &amp;amp; Drop Bilder		HTML, Usability und Barrierefreiheit	4	16.05.2005 22:34

17.01.2012, 14:31
Moewe Benutzer Registriert seit: 06.10.2011 Beiträge: 79 PHP-Kenntnisse: Anfänger	[Erledigt] Drag and Drop script Hallo, ich weiß nicht ob jemand dieses script: http://javascript.jstruebig.de/js/dragObject.js kennt, ich hoffe es. Habe follgenden Code: PHP-Code: <?php include "table.html"; ?> <head> <script type="text/javascript" src="dragObject.js"></script> <script type="text/javascript"> //var Drag = DragObject; function getPos(o) { for(var top = o.offsetTop, left = o.offsetLeft; o = o.offsetParent; top += o.offsetTop, left += o.offsetLeft) {} return [top, left]; } window.onload = function() { var ticketbox = document.getElementById('ticketallbox'); var ticketbox_top = getPos(ticketbox)[0]; var ticketbox_left = getPos(ticketbox)[1]; var ticketbox_bottom = ticketbox.offsetHeight + ticketbox_top; var ticketbox_right = ticketbox.offsetWidth + ticketbox_left; var dragTicket = document.getElementById("dragObjekt"); var tempTicket = new DragObject(dragTicket, dragTicket.childNodes[0]) tempTicket.ondrag = function(e, top, left) { var drag_objekt = this.getPos(); var is_in = (left>ticketbox_left> && (top>ticketbox_top) && (drag_objekt[2] + top<ticketbox_bottom) && (drag_objekt[3] + left<ticketbox_right); ticketbox.style.backgroundColor = is_in ? "white" : "red"; }; }; </script> </head> <body> <div id="ticketallbox" class="drag">Ticketbox <div id="dragObjekt"><h3>Ticket</h3> <p><img src="ticket.jpg"></p> <p>Kunde X</p> </div> </div> </body> und die Html Datei: HTML-Code: <html> <head> <link href="test.css" type="text/css" rel="stylesheet"> </script> </head> <body> <div id="div-data"> <table border="0"> <tr> <td id='mitarbeiter' class="mitarbeiter"> Arne </td> <td class="leer"> <!--//leer--> </td> <td class="mitarbeiter"> Dirk </td> <td class="leer"> <!--//leer--> </td> <td class="Mitarbeiter"> Thomas </td> </tr> <tr height="40px"> </tr> <tr> <td class="mitarbeiter"> Leonie </td> <td class="leer"> <!--//leer--> </td> <td class="mitarbeiter"> Sarah </td> <td class="leer"> <!--//leer--> </td> <td class="Mitarbeiter"> Max </td> </tr> </table> </div> </body> </html> das Drag n Drop klappt super solange ich diesen Teil weg lasse: PHP-Code: `tempTicket.ondrag = function(e, top, left) { var drag_objekt = this.getPos(); var is_in = (left>ticketbox_left> && (top>ticketbox_top) && (drag_objekt[2] + top<ticketbox_bottom) && (drag_objekt[3] + left<ticketbox_right); ticketbox.style.backgroundColor = is_in ? "white" : "red"; };` Dieser Teil ist aber sehr wichtig für mich, da ich verstehen will, wie man prüft wo das Objekt grade ist. Ich möchte nämlich gerne mein Ticket Objekt aus der Ticketbox, zu einem Mitarbeiter ziehen können, sodass später dieses Ticket ihm zugewiesen wird... Aber nunmal klein anfangen^^. Ich bin aufjedenfall ratlos Danke und freundliche Grüße Sebastian


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

17.01.2012, 14:35
Solu Erfahrener Benutzer Registriert seit: 10.11.2011 Beiträge: 268 PHP-Kenntnisse: Fortgeschritten	Ich denke du löst das leichter mit Jquery Drag&Drop

17.01.2012, 14:39
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Schau dir getBoundingClientRect an, das liefert dir die absolute Position eines Elements. offset liefert dir die Position im Vergleich zum ersten positionierten Elternelement. Für eine komplette Implementierung siehe z.b. jquery position. Grüße __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog