• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Drag & Drop

C

ceddy17

Mitglied
Hallo erst einmal ;Jump

Folgenedes Problem/Vorhaben:

Ich will gerne, dass man 2 div container hat und in beiden einen text. Diesen Text kann man dann zwischen beiden div container hin und her schieben. Ich suche schon seid Tagen nach Lösungen, vergeblich. Ich hoffe hier kann mir jemand helfen. :roll:

An Sprachen kann ich HTML, CSS, PHP und JavaScript, allerdings in Java und PHP ein Neuling!!!
 
Cheffchen schrieb:
Hallo,

javascript bzw jquery

Hoffentlich sind die tage bei dir viel kürzer als bei mir, sonst machen wir mal ein schulung, wie such ich richtig :O)
Schau hier Draggable | jQuery UI

Cheffchen
Zum Vergrößern anklicken....

Ne 3 Tage! Danke für den Link aber den kenne ich schon ;)

Diesen haben ich auch schon angewendet! Aber:
1) Hatte ich Probleme, es umzusetzen
2) Ich mir das anders vorgestellt habe
3) Desswgen frage ich hier.

Ich habe villeicht einen Code erwartet, der das erklärt, also:

ceddy17 schrieb:
Ich will gerne, dass man 2 div container hat und in beiden einen text. Diesen Text kann man dann zwischen beiden div container hin und her schieben. Ich suche schon seid Tagen nach Lösungen, vergeblich. Ich hoffe hier kann mir jemand helfen. :roll:
Zum Vergrößern anklicken....
Also kann das jem.

PS: Ich glaube ich habe schon alle Seiten gesucht, so richtig fündig war ich nicht.
 
Gleich zum nächsten Problem, übrigens zu dem Link. Jetzt habe ich das angepasst aber mir fehlen doch noch etwas Erfahrung :/ Vielleicht hier ersteinmal den Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Shopping Cart Demo</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" />
<style type="text/css">
<!--
h1 { padding: .2em; margin: 0; }

#products {
float:left;
width: 500px;
margin-right: 2em;
}

#cart {
width: 200px;
float: left;
margin-top: 1em;
}

#cart ol {
margin: 0;
padding: 1em 0 1em 3em;
}

.ul {
list-style: none;
}

.menue1 {
color:black;
text-decoration:none;
}
-->
</style>
<script>
$(function() {
$( "#catalog" ).accordion();
$( "#catalog li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( "#cart ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
</head>
<body>
<div id="products">
<h1 class="ui-widget-header">Alle Spieler</h1>
<div id="catalog">
<h2><a href="#">Feldspieler</a></h2>
<div>
<ul class="ul">
<li><a href="0000000001.html" class="menue1">Max Mustermann</a></li>
<li><a href="0000000001.html" class="menue1">Max Mustermann</a></li>
<li><a href="0000000001.html" class="menue1">Max Mustermann</a></li>
<li><a href="0000000001.html" class="menue1">Max Mustermann</a></li>
<li><a href="0000000001.html" class="menue1">Max Mustermann</a></li>
</ul>
</div>
<h2><a href="#">Torwart</a></h2>
<div>
<ul>
<li>Zebra Striped</li>
<li>Black Leather</li>
<li>Alligator Leather</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Torwart</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Den Torwart hier rein</li>
</ol>
</div>
<div id="cart">
<h1 class="ui-widget-header">1.Reihe</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Die Spieler hier rein</li>
</ol>
</div>
<div id="cart">
<h1 class="ui-widget-header">2.Reihe</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Die Spieler hier rein</li>
</ol>
</div>
<div id="cart">
<h1 class="ui-widget-header">3.Reihe</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Die Spieler hier rein</li>
</ol>
</div>
<div id="cart">
<h1 class="ui-widget-header">4.Reihe</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Die Spieler hier rein</li>
</ol>
</div>
</div>
</body>
</html>

Meine Probleme/Wünsche:
1.) Ich möchte das man die Nummerrierung weg bekommt. (Erledigt!)
2.) Ih möchte, das man eine maximale Anzahl an Spieler hinzufügen kannst. (Also hier 5 pro Reihe und 1 pro TW)
3.) Zudem kann man alle Spieler nur einmal verschieben. (Also nicht mehrere Male in ver. Reihen)
4.) Wenn ich den Spieler schiebe, soll ebenfalls die Nummerirung weg.
5.) Wenn man auf den Spieler klickt, öffnet sich links ein, das mit größe bestimmten, neues Browserfenster
6.) Man kann die Spieler wieder zurück schieben (ohne das er in der Reihe bliebt)
7.) Nun soll das ganze auch noch so aussehen:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Shopping Cart Demo</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" />
<style type="text/css">
<!--
h1 { padding: .2em; margin: 0; }

#products {
float:left;
width: 500px;
margin-right: 2em;
}

#cart {
width: 200px;
float: left;
margin-top: 1em;
}

#cart ol {
margin: 0;
padding: 1em 0 1em 3em;
}

.ul {
list-style: none;
}

.menue1 {
color:black;
text-decoration:none;
}
-->
</style>
<script>
$(function() {
$( "#catalog" ).accordion();
$( "#catalog tr" ).draggable({
appendTo: "body",
helper: "clone"
});
$( "#cart ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "<tr></tr>" ).text( ui.draggable.text() ).appendTo( this );
}
}).sortable({
items: "tr:not(.placeholder)",
sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
</head>
<body>
<div id="products">
<h1 class="ui-widget-header">Alle Spieler</h1>
<div id="catalog">
<h2><a href="#">Feldspieler</a></h2>
<div>
<table border="1">
<tr><td>Pos</td><td>Spielername</td><td>St&auml;</td></tr>
<tr><td>LF</td><td><a href="0000000001.html" class="menue1">Max Mustermann</a></td><td>100</td><tr>
</table>
</div>
<h2><a href="#">Torwart</a></h2>
<div>
<ul>
<li>Zebra Striped</li>
<li>Black Leather</li>
<li>Alligator Leather</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Torwart</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Den Torwart hier rein</li>
</ol>
</div>
<div id="cart">
<h1 class="ui-widget-header">1.Reihe</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Die Spieler hier rein</li>
</ol>
</div>
<div id="cart">
<h1 class="ui-widget-header">2.Reihe</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Die Spieler hier rein</li>
</ol>
</div>
<div id="cart">
<h1 class="ui-widget-header">3.Reihe</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Die Spieler hier rein</li>
</ol>
</div>
<div id="cart">
<h1 class="ui-widget-header">4.Reihe</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Die Spieler hier rein</li>
</ol>
</div>
</div>
</body>
</html>

Wie ihr seht, kann man die <tr> rüber schieben, aber rechts kommt dann <tr> ohne Border. Wie kann man einstellen, dass der Border auch rechts ist.



Das wäre echt nett, wenn (muss ja nicht Einzelarbeit) alle Aufgaben/Ziele erreicht werden. Ich würde mich echt freuen! Hoffe alles war vertändlich ;)
 
Zuletzt bearbeitet:
Das soll soviel heißen wie: Stelle es auf einen Server, damit wir uns das ganze in Aktion ansehen können. Deinen Quellcode will hier niemand nachbauen, das ist für uns Zeitverschwendung.

Alternativ kannst du es auch hier noch mal nachbauen und dann den Link hier posten:
Create a new Fiddle - jsFiddle
 
ceddy17 schrieb:
Keiner eine Ahnung? Schade :neutral:
Zum Vergrößern anklicken....

Naja, deine Anforderungen machen die Frage eher zu einem Fall für die Jobbörse. Das ist schon etwas Arbeit, und ich glaube nicht, dass dir jemand das Script für lau schreibt. Aber vielleicht täusche ich mich ja. ;)

Meine Probleme/Wünsche:
1.) Ich möchte das man die Nummerrierung weg bekommt. (Erledigt!)
2.) Ih möchte, das man eine maximale Anzahl an Spieler hinzufügen kannst. (Also hier 5 pro Reihe und 1 pro TW)
3.) Zudem kann man alle Spieler nur einmal verschieben. (Also nicht mehrere Male in ver. Reihen)
4.) Wenn ich den Spieler schiebe, soll ebenfalls die Nummerirung weg.
5.) Wenn man auf den Spieler klickt, öffnet sich links ein, das mit größe bestimmten, neues Browserfenster
6.) Man kann die Spieler wieder zurück schieben (ohne das er in der Reihe bliebt)
7.) Nun soll das ganze auch noch so aussehen:
Zum Vergrößern anklicken....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben