JavaScript is required. Please enable it to continue.
Your browser lacks required capabilities. Please upgrade it or switch to another to continue.
Loading…
Start [[game]].
<br> <br> <br> <br> <br> <div class="row"> <div id="droppable-1" class="droppable ui-widget-header col-md-3"> Put draggable #1 here. </div> <div id="equal" class="col-md-1"> = </div> <div id="droppable-2" class="droppable ui-widget-header col-md-3"> Put draggable #2 here. </div> <div id="droppable-3" class="droppable ui-widget-header col-md-3"> Put draggable #3 here. </div> <div id="droppable-4" class="droppable ui-widget-header col-md-2"> Put draggable #4 here. </div> </div> <div id="draggable-1" class="draggable ui-widget-content" style="width: 150px; height: 150px; padding: 0.5em;"> Drag me around #1. </div> <div id="draggable-2" class="draggable ui-widget-content" style="width: 150px; height: 150px; padding: 0.5em;"> Drag me around #2. </div> <div id="draggable-3" class="draggable ui-widget-content" style="width: 150px; height: 150px; padding: 0.5em;"> Drag me around #3. </div> <div id="draggable-4" class="draggable ui-widget-content" style="width: 150px; height: 150px; padding: 0.5em;"> Drag me around #4. </div> <script> $( function() { $( ".draggable" ).draggable({ containment: "document", cursor: "move", cursorAt: { top: 75, left: 75 }, snap: ".droppable" }); $( "#droppable-1" ).droppable({ accept: "#draggable-1", classes: { "ui-droppable-hover": "ui-state-hover" }, drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .html( "Dropped!" ) } }); $( "#droppable-2" ).droppable({ accept: "#draggable-2", classes: { "ui-droppable-hover": "ui-state-hover" }, drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .html( "Dropped!" ) } }); $( "#droppable-3" ).droppable({ accept: "#draggable-3", classes: { "ui-droppable-hover": "ui-state-hover" }, drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .html( "Dropped!" ) } }); $( "#droppable-4" ).droppable({ accept: "#draggable-4", classes: { "ui-droppable-hover": "ui-state-hover" }, drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .html( "Dropped!" ); } }); } ); </script> <<script>> $(document).one(":passagerender", function(event) { // Passage is about to be displayed. $(event.content).find(".draggable").draggable(); // Make "draggable" elements draggable. $(event.content).find(".droppable").droppable(); // Make "droppable" elements droppable. }); <</script>>
yay! [[Restart|Start]]