Ergebnis 1 bis 4 von 4

Thema: jquery droppable

  1. #1
    Teeny
    Registriert seit
    03.01.2011
    Beiträge
    29
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard jquery droppable

    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-Code:
    <!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> 
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: jquery droppable

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    03.01.2011
    Beiträge
    29
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: jquery droppable

    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

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: jquery droppable

    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-Code:
    <!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> 
    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
    Geändert von synaptic (22.12.2015 um 20:06 Uhr)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Jquery Problem
    Von DummerTroll im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 13
    Letzter Beitrag: 21.06.2013, 11:37
  2. jQuery Conitextmenu
    Von Tobse im Forum Script-Archiv
    Antworten: 11
    Letzter Beitrag: 13.06.2011, 20:58
  3. jQuery Frage
    Von ninom im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 18.08.2010, 20:30
  4. jQuery Plugin?
    Von #matthias im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 19.07.2010, 21:37
  5. jquery konflikt?
    Von dodo87 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 22.04.2010, 10:21

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •