You are not logged in.

Div in anderen Div ziehen mit Rückgabe der neuen Parent-Div-ID

wcf.regNote.message

TimSchreiner

Beginner

  • "TimSchreiner" started this thread

Posts: 2

  • Send private message

1

Wednesday, March 3rd 2010, 2:44am

Div in anderen Div ziehen mit Rückgabe der neuen Parent-Div-ID

Hallo an alle Leser,

vorweg möchte ich kurz sagen, dass ich noch nicht sehr fortgeschritten bin mit JavaScript und ich keine fertigen Lösungen erwarte, sondern nur Denkanstöße.
Nun zu meinem hoffentlich kleinen Problem.
Ich habe eine Reihe von Divs (60 Stück) mit 50px*50px. In manchen dieser Divs gibt es Divs mit der Größe von 42px*42px
Mein Ziel ist es, dass ich einen beliebigen Div der Größe 42px*42px in einen anderen 50px *50px ziehen kann. Die Divs haben alle die Postition: Static
Beim Verschieben/Ziehen änder ich die Position dann auf absolute. Das Ziehen/Verschieben funktioniert auch.
Bei der Ablage will ich nun herausfinden, in welchen Div ich den gezogenen Div abgelegt habe.
Probiert habe ich das mit parentNode.id . Dieses liefert mir allerdings nur die ID des "Start"-Divs.
Wie komme ich nun an die Parent-ID des Divs, indas der neue Div hineingezogen wurde.
Hier meine Codeausschitte:

HTML:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12

<body onLoad="javascript:init();">
....
{foreach from=$character_inventar item=inv}
{foreach from=$inv item=i}
<div class="character_inventar_slot" id="slot_{$i.slot}">
{if $i.id}
<div class="item" id="item_{$i.id}" onClick="select_click('item_{$i.id}')"></div>
{/if}
</div>
{/foreach}
<div class="cf"></div>
{/foreach}

Das HTML ist mit dem Framework Smarty gemacht. Ich lasse da nur Schleifen durchlaufen um ein 10*6 großes Div-Feld aus den 50px*50px Divs aufzubauen.
Die If-Abfrage ist für die vereinzelten kleineren Divs da.

javascript:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

var dragobjekt = null;
var dragx = 0;
var dragy = 0;
var posx = 0;
var posy = 0;

function init() {
  document.onmousemove = drag;
}

function select_click(id) {
if(dragobjekt == null) {
dragobjekt = document.getElementById(id);
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
dragobjekt.style.position = "absolute";
}
else {
dragobjekt.style.position = "static";
alert(dragobjekt.parentNode.id);
dragobjekt=null;
}
}

function drag(ereignis) {
posx = document.all ? window.event.clientX : ereignis.pageX;
posy = document.all ? window.event.clientY : ereignis.pageY;
if(dragobjekt != null) {
dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
}
}

Mit den 3 Funktionen bewirke ich die Div-Verschiebung per Maus.
Ob es richtig ist, das Element beim Ablegen wieder auf Position: Static zu setzen weiß ich nicht. Es war im Grunde nur ein Versuch.

CSS:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13

.item {
 width:42px;
height:42px;
background-color:red;
 }

.character_inventar_slot {
float:left;
padding:4px 4px 4px 4px;
width:42px;
height:42px;
background-image:url('images/inventar_slot_back.gif');
}


Ich hoffe Ihr habt mein Anliegen verstanden.
Sollten noch Fragen von eurer Seite aus bestehen, einfach posten :)

This post has been edited 3 times, last edit by "TimSchreiner" (Mar 3rd 2010, 3:01am)

Prometheus

Administrator

Posts: 3,278

  • Send private message

2

Wednesday, March 3rd 2010, 7:34am

Das Du die ID vom Start Div bekommst leuchtet mir ein. Liegt meiner Meinung nach daran, dass die ganzen kleinen Divs eigenständig sind also sprich nicht eines im anderen steckt. Wenn du also ein kleins Div in ein anderes nicht ganz so kleines Div ziehst dann legst Du dieses quasie nur "auf" das Div bzw. davor und nicht "hinein". Deshalb kommst du an die ID nicht so einfach dran. Du müsstest dazu zum einen die absolute Position des kleinen Divs prüfen und dann anhand der Positionen der nicht ganz so kleinen Divs errechnen in welchem Div das kleine grade steckt. Ich denke nur mit Mathe kommst Du hier weiter.

Wobei Du natürlich auch bei der gesamten Aktion rein mir absoluten Positionen arbeiten könntest und beim verschieben lediglich die Position fest hälst anstatt fest positionierte Divs als Anker zu verwenden. Hätte den Vorteil die 50x50 Divs gar nicht zu brauchen und die kleinen Divs noch freier positionieren zu können. Zu kannst ja dennoch ein Raster vorgeben in welchem sie sich bewegen dürfen.

Schau Dir zu dem Thema auf jeden Fall mal Prototype JS Framewort sowie Scriptaculous an. Da gibt es bereits fertige Funktionen um Divs zu schieben usw.
http://script.aculo.us/
Jedwege Anfragen bitte an Technomausi oder ShaoKhan richten. Dieses Konto ist und bleibt inaktiv.

TimSchreiner

Beginner

  • "TimSchreiner" started this thread

Posts: 2

  • Send private message

3

Wednesday, March 3rd 2010, 9:14am

Hallo,

danke für die Antwort.
Das mt dem errechnen der Div Position und damit dann eine relative Zuordnung des Divs, inder sich der neue Div befinden sollte hatte ich mir fast gedacht.
Is was umständlich für 60 Divs, da sich das "Haupt"-Di indem sich die ganze Divs befinden nicht immer an der selben Stelle ist aber auch damit kann man klar kommen.
Hatte nur gehofft das irgendwie umgehen zu können :D
Aber okay, jetzt weiß ichs wies geht.
Ich hatte mir mal ein paar JQuery Scripts zu dem Thema angeschaut, welche natürlich auch funktioniert haben, aber da ich noch Anfänger bin, suche ich sehr viel Hilfe bei Google und zum normalen JavaScript findet man einfach mehr als zu Frameworks meiner Erfahrung nach.
Darum bleibe ich lieber beim normalen JavaScript ohne Frmaeworks und Libraries, erstmal.
Ist das nach euren Erfahrungen besser für den Anfang oder direkts ins Framework und sich die Doku dazu mal reinziehen?

Grüße

Similar threads

wcf.user.socialbookmarks.titel