JavaScript jQuery - droppable Elemente reagieren nicht auf drop

C

Clarity

0
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?
 
Enterprize1 hat gesagt.:
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 :) )
Zum Vergrößern anklicken....

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.
 
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

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

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.
Zum Vergrößern anklicken....
Zudem hab ich noch ein bisschen aufgeräumt! :)

HTML: 
<!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>

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

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

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.
 
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.
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben