jquery droppable

Fussl1

Hallo
ich habe momentan ein problem mit jquery/droppable. Ich würde es gerne so haben, wenn in einen Droppable und Draggable ist, dass dann nichts mehr hineingezogen werden kann. Wenn jedoch der Inhalt wieder rausgezogen wird, soll dann die Droppable funktion wieder aktiviert werden. Ich hab schon im netz gesucht aber selber nichts gefunden was mir weiterhelfen würde. Habs mit disable versucht, aber wenn ich es deaktiviere funktioniert dass out nicht mehr. Gibt es eine Funktion wie ich es bewerkstelligen kann damit beim rausziehen die funktion wieder aktiviert wird?

http://s503489862.online.de/test/index.php

PHP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Titel der Webseite</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script type="text/javascript" src="http://ff.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script><script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">    
    <script>
    $(function(){    
        $( "#droppable, #droppable1" ).droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            drop : function (event, ui) {  
                $( this )        
                .removeClass( "droppable" )
                .addClass( "droppable1" )                
                .find( "p" ) 
                    .html( "geladen" );
                $( this ).droppable( "disable" );
            },    
            out : function (event, ui) {    
                $( this )
                .removeClass( "droppable1" )
                .addClass( "droppable" )    
                .find( "p" ) 
                    .html( "Dropzohne" );
                $( this ).droppable( "enable" );
            },
        });

        $( "#draggable" ).draggable({ revert: "invalid", snap: ".droppable", snapMode: "inner" });
        $( "#draggable1" ).draggable({ revert: "invalid", snap: ".droppable", snapMode: "inner" });
    })
    </script>    
    <style>
        .droppable{
            width:                    900px;
            height:                    200px;
            background-color:        red;
        }

        .droppable1{
            width:                    500px;
            height:                    200px;
            background-color:        yellow;
        }

        .draggable{
            width:                    200px;
            height:                    200px;
            background-color:        green;
        }

    </style>        
  </head>


  <body>


        <div id='droppable' class='droppable'>
            <p>Dropzohne</p>
        </div>        

        <div id='droppable1' class='droppable'>
            <p>Dropzohne</p>
        </div>

        <div id='draggable' class='draggable'>
            <p>Drag</p>
        </div>

        <div id='draggable1' class='draggable'>
            <p>Drag</p>
        </div>


  </body>
</html>

Alles anzeigen

synaptic

also aktueller status quo ist:
man kann draggen und droppen, aber nachdem das passiert ist kann man das drag feld zwar rausziehen, aber nich erneut was in der dropzone landen? bzw/und man kann bisher nur ein draggable in die eine dropzone ziehen und dann auch in die andere, aber dann sind beide dropzones gegen weitere aktionen gesperrt.

dein wunsch ist aber dass man nur so lange etwas in der dropzone drin ist, man nichts reinschieben kann? bzw sobald man etwas rauszieht aus der dropzone, dass man dann wieder was reinschubsen kann?

quasi wie bei ner schublade, die nur ein teil aufnehmen kann?

mir gehts in erster linie darum zu verstehen, was genau du willst, denn nur so kann ich da gezielt gucken und helfen

Fussl1

Mein Wunsch ist es so zu haben wenn ich etwas reinschiebe, damit dass Droppable verschwindet und man nichts anderes mehr hineinschieben kann. Jedoch wenn ich dass zuvor hineingeschobene Draggable wieder rausziehe, soll dass Doppable wieder freigegeben werden und für alle andern Draggable Elemente verfügbar sein.

Ich hoffe du hast es verstanden, weis gerade nicht wie ich es anders erklären soll. Am Ende soll es mehrere Doppable und Draggables geben.

MFG Fussl1

synaptic

jau, mir gehts halt nur darum dass ich mich versichere, dass ich es richtig verstanden habe

das "nichts mehr reinschieben" hab ich bereits hinbekommen.
aktuell fehlt mir noch das zurück an den platz vom rausschieben, dazu hab ich auch schon ne idee, muss das aber erst testen

kann/konnte heut leider net den ganzen tag scripten und hatte selber bisher erst eine begegnung mit drag n drop. wenn ich gleich zeit hab, schick ich dir den externen link zu meiner lokalen entwicklung per pn. dann kannste schon nen sneak preview haben

edit:

das hier wäre dann eine lösung:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Titel der Webseite</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script type="text/javascript" src="http://ff.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script>
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">    
    <script>
    $(function(){    
        var base = $('#dragbase');
        var drags = $('#dragbase > div.draggable');


        function resetDropBase(lasttarget){
            if(typeof(lasttarget) != 'undefined'){
                if(lasttarget.attr('id') != 'dragbase'){
                    lasttarget
                    .find( "p" ) 
                        .html( "Dropzone" );

                    lasttarget
                    .removeClass( "droppable1" )
                    .addClass( "droppable" )
                    .data('has_child', false)
                    .droppable( "option", "accept", '*' )
                    ;
                }                            
            }
        }


        
        for(var i=0; i< drags.length; i++){
            var aktDrag = $(drags[i]);
            aktDrag.data({
                'position': aktDrag.offset,
                'revert' : false
            });
        }
        base.css({
            height : base.height(),
            width : base.width()
        }).droppable({
            drop : function (event, ui) {  
                resetDropBase(ui.draggable.data('lasttarget'));
                ui.draggable.data('lasttarget' , $(this));
            }
        });

        $( "#droppable, #droppable1" ).droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            drop : function (event, ui) { 
                //allowdrop ist steuervariable, ob ein element gedropped werden darf oder nicht, initial wird dropping erlaubt 
                 var allowDrop = true;
                 //hasChild bestimmt, ob bereits etwas in der dropzone ist, initial ist es undefined
                 var hasChild = $(this).data('has_child');
                 //prüfen ob has_child überhaupt vorhanden ist
                 //wenn ja weitere prüfung auf den darin liegenden wert
                 if(typeof(hasChild) != 'undefined'){
                    if(hasChild === true){
                        //ist haschild auf true, wurde bereits was ins feld gelegt und wir stellen die
                        //steuervariable auf false, damit nix passieren kann.
                        allowDrop = false;
                    }
                }

                if(allowDrop === true){
                    //hier deine "alte droplogik"
                    $( this )    
                    .removeClass( "droppable" )
                    .addClass( "droppable1" )                  
                    .find( "p" ) 
                        .html( "geladen" );

                    //erweitert um das befüllen unserer inhalte haschild und child, danach deaktivieren
                    $( this )
                        .data('has_child', true)
                        .droppable( "option", "accept", ui.draggable )
                        ;
                    resetDropBase(ui.draggable.data('lasttarget'));
                    ui.draggable.data('lasttarget' , $(this));
                }else{
                    //wenn nen kind vorhanden, wird das event direkt gestoppt
                    event.preventDefault();
                    event.stopPropagation();
                    return false;
                }  
            }
        });

        $( "#draggable" ) .draggable({ revert: "invalid", snap: ".droppable", snapMode: "inner"});
        $( "#draggable1" ).draggable({ revert: "invalid", snap: ".droppable", snapMode: "inner"});
    })
    </script>    
    <style>
        .droppable{
            width:                    900px;
            height:                    200px;
            background-color:        red;
        }

        .droppable1{
            width:                    500px;
            height:                    200px;
            background-color:        yellow;
        }

        .draggable{
            width:                    200px;
            height:                    200px;
            background-color:        green;
        }

    </style>        
  </head>


  <body>


        <div id='droppable' class='droppable'>
            <p>Dropzone</p>
        </div>        

        <div id='droppable1' class='droppable'>
            <p>Dropzone</p>
        </div>

        <div id="dragbase">
            <div id='draggable' class='draggable'>
                <p>Drag</p>
            </div>

            <div id='draggable1' class='draggable'>
                <p>Drag</p>
            </div>
        </div>


  </body>
</html>

Alles anzeigen

es geht mit sicherheit noch ne ecke hübscher und eigentlich wäre sowas ein fall für ein ganzes plugin, wo man dann die drags und drops drin kapselt und ggf noch eigene im namespace globalisierte variablen nutzen kann etc pp...
aber ich hoffe das hier reicht erstmal

Tags