javascript - jQuery UI Draggbles - constrain movement by NOT allowing drag inside an area -


i'm using jquery ui draggables on page, drag words relevant boxes. http://marmiteontoast.co.uk/fyp/login-register/register-username-builder.php

js fiddle

it uses constrain keep within general div of page, can't drag outside area.

as (hopefully) obvious, intended drag 1 green word green box, 1 purple purple etc. however, want couple of things. using constrain round other way. want not allow dragging boxes colours e.g:

  • word (1) can dragged box (1) only. hit edge of purple box. same goes other colours. try , drag them wrong box , they'll stopped @ edge.
  • if statement once item dragged box, nothing can dragged again. unless remove word, useable again (to limit 1 word per box).

this basic code have far draggables:

// draggies $( ".draggable" ).draggable({ containment: "#dragarea", scroll: false }); $( ".slot.one" ).droppable({   drop: function() {     $(".tick.one").fadein("fast");   } }); $( ".slot.two" ).droppable({   drop: function() {     $(".tick.two").fadein("fast");   } }); $( ".slot.three" ).droppable({   drop: function() {     $(".tick.three").fadein("fast");   } 

});

each tile , box uses .slot.one , .word.one define them different it's doable script each 1 (1, 2 or 3) independently.


Comments

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

php - Magento - Deleted Base url key -

android - How to disable Button if EditText is empty ? -