BadKiss
Mitglied
Huhu 
Da mir heute schon geholfen wurde bei einem PHP Problem (danke nochmal ^^), versuch ich nun hier mal mein Glück.
Gleich vorne weg: Ich bin in Sachen JS und Ajax noch ziemlicher Anfänger, daher bitte nicht zu sehr böse sein, wenn meine Fragen und mein Problem evtl von ganz einfacher Lösungsnatur sind.
Ich möchte auf meiner Seite das Einsortieren von "Karten" einfacher und benutzerfreundlicher gestalten.
Bisher musste man in einem Dropdown immer noch auswählen, wohin man diese Karte "verschieben" möchte.
Jetzt würde ich es gerne per Drag&Drop so machen, dass die Karte sich in einem Div befindet und die Kategorie (wo die Karte einsortiert werden kann) ebenfalls ein Div ist.
Ich möchte somit ein Div (mit der Karte) in das andere Div (die Kategorie) verschieben.
Hier mal mein bisheriges Ergebnis: Klick
Im Moment kann man die Karten zwar herumschieben, allerdings nicht in das Kategoriediv (Will Cards) schieben.
Hatte auch schon andere Möglichkeiten versucht (zb mit Listen), allerdings funktioniert das nicht über mehrere Ebenen bzw bei mehr als 100 Karten schleicht sich sicherlich da irgendwann ein Fehler ein.
Hab schon lange daran rumprobiert und komme leider nicht weiter
Hier noch der momenate Code:
Und das Stylesheet:
Wenn ihr noch etwas benötigt, zb die JS-Dateien, dann einfach bescheid sagen.
Ich hoffe, es kann mir jmd bei dem Problem helfen, ich bin schon am Verzweifeln langsam
Achja, es würde mir schon reichen, wenn ich es so hinkriege, dass ich das Div in das andere verschieben kann, der SQL-Befehl kann noch warten (also dass der dann ausgeführt wird).
Da mir heute schon geholfen wurde bei einem PHP Problem (danke nochmal ^^), versuch ich nun hier mal mein Glück.
Gleich vorne weg: Ich bin in Sachen JS und Ajax noch ziemlicher Anfänger, daher bitte nicht zu sehr böse sein, wenn meine Fragen und mein Problem evtl von ganz einfacher Lösungsnatur sind.
Ich möchte auf meiner Seite das Einsortieren von "Karten" einfacher und benutzerfreundlicher gestalten.
Bisher musste man in einem Dropdown immer noch auswählen, wohin man diese Karte "verschieben" möchte.
Jetzt würde ich es gerne per Drag&Drop so machen, dass die Karte sich in einem Div befindet und die Kategorie (wo die Karte einsortiert werden kann) ebenfalls ein Div ist.
Ich möchte somit ein Div (mit der Karte) in das andere Div (die Kategorie) verschieben.
Hier mal mein bisheriges Ergebnis: Klick
Im Moment kann man die Karten zwar herumschieben, allerdings nicht in das Kategoriediv (Will Cards) schieben.
Hatte auch schon andere Möglichkeiten versucht (zb mit Listen), allerdings funktioniert das nicht über mehrere Ebenen bzw bei mehr als 100 Karten schleicht sich sicherlich da irgendwann ein Fehler ein.
Hab schon lange daran rumprobiert und komme leider nicht weiter
Hier noch der momenate Code:
HTML:
<link rel="stylesheet" href="style_collapse.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="/test/styles.css" />
<script type="text/javascript" src="collapse.js"></script>
<script type="text/javascript" src="jquery-1.3.2.js" ></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js" ></script>
<script type="text/javascript" >
$(function(){
$('.dragbox')
.each(function(){
$(this).hover(function(){
$(this).find('h2').addClass('collapse');
}, function(){
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function(){
$(this).find('.configure').css('visibility', 'visible');
}, function(){
$(this).find('.configure').css('visibility', 'hidden');
})
.click(function(){
$(this).siblings('.dragbox-content').toggle();
})
.end()
.find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
$(ui.item).find('h2').click();
var sortorder='';
$('.column').each(function(){
var itemorder=$(this).sortable('toArray');
var columnId=$(this).attr('id');
sortorder+=columnId+'='+itemorder.toString()+'&';
});
//alert('SortOrder: '+sortorder);
/*Pass sortorder variable to server using ajax to save state*/
}
})
.disableSelection();
});
</script>
<div class="column" id="column2">
<div class="dragbox">
<h2> Will Cards </h2>
<div class="dragbox-content-will">
</div>
</div>
</div>
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Keksdose 01</h2>
<div class="dragbox-content" >
<img src="keksdose,1.gif" alt="" />
</div>
</div>
<div class="dragbox" id="item2" >
<h2>Keksdose 02</h2>
<div class="dragbox-content" >
<img src="keksdose,2.gif" alt="" />
</div>
</div>
<div class="dragbox" id="item3" >
<h2>Keksdose 03</h2>
<div class="dragbox-content" >
<img src="keksdose,3.gif" alt="" />
</div>
</div>
<div class="dragbox" id="item4" >
<h2>Keksdose 04</h2>
<div class="dragbox-content" >
<img src="keksdose,4.gif" alt="" />
</div>
</div>
<div class="dragbox" id="item5" >
<h2>Keksdose 05</h2>
<div class="dragbox-content" >
<img src="keksdose,5.gif" alt="" />
</div>
</div>
</div>Und das Stylesheet:
HTML:
.column{
float:left;
position:relative;
margin-left:2px;
}
.column .dragbox{
margin:2px 2px 2px;
background:#3D3D3D;
position:relative;
float:left;
border:1px solid #5C5B5B;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox h2{
margin:0;
font-size:11px;
padding:2px;
background:#3D3D3D;
color:#a1a1a1;
border-bottom:1px solid #5C5B5B;
font-family:Tahoma;
cursor:move;
text-align:center;
}
.dragbox-content, .dragbox-content-will{
background:#3D3D3D;
min-height:66px; margin:5px;
font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column .placeholder{
margin:2px 2px 2px;
background:#3D3D3D;
position:relative;
float:left;
border:1px solid #5C5B5B;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.dragbox h2.collapse{
/*background:#3D3D3D url('collapse.png') no-repeat top right;*/
background:#3D3D3D;
}
.dragbox h2 .configure{
font-weight:normal;
}Wenn ihr noch etwas benötigt, zb die JS-Dateien, dann einfach bescheid sagen.
Ich hoffe, es kann mir jmd bei dem Problem helfen, ich bin schon am Verzweifeln langsam
Achja, es würde mir schon reichen, wenn ich es so hinkriege, dass ich das Div in das andere verschieben kann, der SQL-Befehl kann noch warten (also dass der dann ausgeführt wird).
