Hackerboard Wiki HaboBlog
Hackerboard bei Facebook Hackerboard bei Google+ Hackerboard bei Twitter

[HaBo]

 
(Web-) Design und webbasierte Sprachen Tipps & Tricks, Designabgleich, HTML & Javascript, Flash, ASP, PHP, Perl/CGI...

jQuery - droppable Elemente reagieren nicht auf drop

Diskussion: jQuery - droppable Elemente reagieren nicht auf drop im Forum (Web-) Design und webbasierte Sprachen, in der Kategorie Web, Network & Multimedia Palace; Anzeige Hi Leute, ich beiße hier gleich in die Tischkante. Ich bin nämlich grade dabei mich mit jQuery bekannt zu ...
Antwort
Themen-Optionen Ansicht
   
Alt 24.06.11, 17:35   #1 (permalink)
 
Registriert seit: 24.06.11
Clarity Leistung: Z3
Likes: 3
Standard jQuery - droppable Elemente reagieren nicht auf drop
Anzeige

Hi Leute,

ich beiße hier gleich in die Tischkante.

Ich bin nämlich grade dabei mich mit jQuery bekannt zu machen.

Dabei wollte ich mal einen kleines Shopsystem aufbauen, bei dem es möglich sein soll, die Artikel in den Korb zu ziehen.
Auf der Seite von jQuery sieht das einfach aus, in diversen Tutorials funktioniert das scheinbar auch recht klasse, nur bei mir will das einfach nicht funktionieren.

Elemente zu ziehen ist kein Problem, nur ich schaffe es nicht, auf das "droppen" des Elements zu reagieren.

Hat wer eine Idee?

Angehängte Dateien
Dateityp: txt shop.html.txt (853 Bytes, 5x aufgerufen)
Dateityp: txt shop.js.txt (211 Bytes, 10x aufgerufen)
Clarity ist offline   Mit Zitat antworten
Alt 24.06.11, 21:48   #2 (permalink)
 
Registriert seit: 13.05.07
Enterprize1 Leistung: Facit NTK
Likes: 0
Standard
Hi,

du solltest auch die richtige ID benutzen cart!=carth .

Zusätzlich fehlt noch ein Doctype in der html datei. (http://de.selfhtml.org/html/allgemein/grundgeruest.htm)

(Und Leerzeichen um Attribut-Gleichhaltszeichen sehen IMHO ein wenig doof aus )
Geändert von Enterprize1 (24.06.11 um 21:54 Uhr)
Enterprize1 ist offline   Mit Zitat antworten
   
HaBOT
 
- Anzeige -

Werbung ist gerade online    
Alt 25.06.11, 10:04   #3 (permalink)
Themenstarter
 
Registriert seit: 24.06.11
Clarity Leistung: Z3
Likes: 3
Standard
Zitat:
Zitat von Enterprize1 Beitrag anzeigen
Hi,

du solltest auch die richtige ID benutzen cart!=carth .

Zusätzlich fehlt noch ein Doctype in der html datei. (SELFHTML: HTML/XHTML / Allgemeine Regeln fr HTML / Grundgerst einer HTML-Datei)

(Und Leerzeichen um Attribut-Gleichhaltszeichen sehen IMHO ein wenig doof aus )
Danke für den Tipp, aber inwiefern hat der Doctype mit jQuery zu tun? Auf die schnelle Suche habe ich nur ein Problem mit dem jQuery CSS und dem Quirksmode gefunden. Momentan arbeite ich aber im Firefox 4.

Das mit der Id habe ich gefixt, Problem besteht weiterhin. Komischerweise kann er ja auf den Selektor reagieren.
Ich kann es mir absolut nicht erklären.
Clarity ist offline   Mit Zitat antworten
Alt 25.06.11, 10:34   #4 (permalink)
 
Benutzerbild von she3p
 
Registriert seit: 07.05.07
she3p Leistung: 8086
Likes: 19
Standard
Also, folgendes:

1) Wie bereits von @Enterprize1 erwähnt muss natürlich die ID stimmen.
2) Unbedingt die Documentation zu Rate ziehen. Da steht nämlich bei over

Zitat:
This event is triggered as an accepted draggable is dragged 'over' (within the tolerance of) this droppable.
Das ist aber nicht, was du eigentlich willst, oder? Was du suchst ist der Event drop.

Zitat:
This event is triggered when an accepted draggable is dropped 'over' (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on. ui.draggable represents the draggable.
Zudem hab ich noch ein bisschen aufgeräumt!

shop.html   
HTML-Code:
<!DOCTYPE html>
<html> 
    <head> 
        <title>My Amazon/jQuery Bastard</title> 
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
        <link href="shop.css" rel="stylesheet" type="text/css"/> 
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
        <script type="text/javascript" src="shop.js"></script> 
    </head> 
    <body> 
        <ol class="draggable"> 
            <li>Tshirt</li> 
            <li>Hose</li> 
            <li>Zukunft</li> 
        </ol> 
        <div class="droppable"> 
            Your items: 
        </div> 
    </body> 
</html>


shop.css   
Code:
ol.draggable li {
    width:200px;
    background-color:green;
}

.droppable {
    background-color:red;
    height:100px;
}


shop.js   
Code:
$(document).ready(function()
{ 
    $("ol.draggable li").draggable();
     
    $(".droppable").droppable(
    { 
        drop: function()
        { 
            alert('working!'); 
        } 
    }); 
});


Viel Spass damit. Achja, als Erinnerung für mich. Draggable-Elemente müssen in die Droppable-Box passen (zumindest zu 50%), ansonsten wird der Event nicht getriggert! Daher die Hintergrundfarben.
__________________
she3p ist offline   Mit Zitat antworten
Alt 25.06.11, 11:03   #5 (permalink)
Themenstarter
 
Registriert seit: 24.06.11
Clarity Leistung: Z3
Likes: 3
Standard
Tausendmal Danke she3p!

Die Dokumentation habe ich mir durchgelesen, aber nachdem ich dein Memo gelesen habe, dass draggable - Elemente 50% kleiner als die Dropzone sein müssen, weiß ich jetzt, was GENAU mit "within this tolerance" gemeint ist.

Dadurch funktioniert "drop" jetzt.
Clarity ist offline   Mit Zitat antworten
Antwort
   
- Anzeige -

Werbung ist gerade online    

[HaBo] » Web, Network & Multimedia Palace » (Web-) Design und webbasierte Sprachen » JavaScript jQuery - droppable Elemente reagieren nicht auf drop
« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks sind aus
Pingbacks sind aus
Refbacks sind aus

Alle Zeitangaben in WEZ +2. Es ist jetzt 22:22 Uhr.
vBulletin® v3.8.7, Copyright ©2000-2012, vBulletin Solutions, Inc.

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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61