javascript - Building drag and drop navigation tabs -

-

i'm working on building new website purely learning purposes , want try , implement drag/drop sorting system. aware jquery provide sortable ui component http://jqueryui.com/sortable/ want have go @ designing , building system scratch (seen learning purposes).

when comes javascript have admit novice, wondering if of offer 2 cents against current thinking of how program work:

  • an un-ordered list sits @ top of page (navigation bar), each item assigned class 'draggable x' x current position in list
  • an event listener bound each li element within list
  • when on-mouse-down made on element variable set telling cell has been clicked, creates thumbnail under cursor (hides old cell) , allows user drag
  • when mouse released list item slotted new position updating class number, whilst decrementing class numbers behind it

questions:

1) main problem is, how detect when have passed li element when dragging? assume width n has been passed, each cell of variable length making solution inappropriate.

2) assuming going need use ajax handle callback, otherwise going undesired page refreshes (right)?

hopefully won't receive down votes - want stress not seeking solution guys, have used these forums long enough know don't demand code community without providing of own work! i'd feedback on initial draft answers 2 questions asked above.

thanks in advance time

alex.

if using jquery can avoid having know order items in.

the .index() function return position of item relative siblings.

you can keep track of element want move adding working class on mouse down even. (i use .draging in example)

on mouseup event find our old item class added. depending on element first compared other, insert working element before or after element mousedup on , remove working class.

here example http://jsfiddle.net/v72le/2/

function swap(dragable, draging) {     //find direction of move move item based on direction     var = $(dragable).index();     var = $(draging).index();      if (from > -1 && > -1) {         var direction = - to;         if (direction > 0) {             $(draging).insertafter($(dragable));         } else if (direction < 0) {             $(draging).insertbefore($(dragable));         }     } }

Comments

Post a Comment

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

-
i having problem, have grid called "gridbasica" , this: thisform.gridbase.recordsource = "sgviemp" sgviemp cursor made executing select sqlserver command sqlexec. when want modify registry, go form , the update there. so, when come form grid, grid isnt grid anymore, big white rectangle. reading around said: delete recordsource , asingt again. thisform.gridbase.recordsource = "" *--i sqlexe here thisform.gridbase.recordsource = "sgviemp" i , works, but, when click button modify again cursos updated modify form doesnt load fields did first time. could me out that? thanks in advance. --------------- edit ------------------ i have been doing recommended: lnselect = select(0) n = sqlexec(thisform.conexion,"select emp_ccodigo codigo, emp_cnombre 'nombre o razon social', emp_cnumrif 'r.i.f' sgviempr","sgviemp1") set echo on suspend select sgviemp zap in sgviemp *-- browse *--zaps correct
Read more

jquery - Set jPicker field to empty value -

-
im using jpicker color selector in form. have clear value set window/icon 'no color selected' state. i've tried following: $(':input[name="color"]').val(''); //access value directly. (does not affect jpicker) 2: $.jpicker.list[0].color.active.val('hex', '', this); //set color black , input value 000000, instead of empty string 3: $.jpicker.list[0].color.active.val(null, '', this); //does nothing none of 3 methods seems behave properly. in advance. this works me :) $.jpicker.list[0].color.active.val('v', null); here example: http://jsfiddle.net/3up7n/
Read more

.htaccess - htaccess convert request to clean url and add slash at the end of the url -

-
ok , searched more 4 days , more 20 posts here in stach or in websites without kind of success first here htaccess file rewriteengine on rewriterule ^([a-za-z0-9_]+)/?$ index.php?page=$1 [nc] rewriterule ^([a-za-z0-9_]+)\/([a-za-z0-9_]+)\/?$ index.php?page=$1&action=$2 [nc] i tried many codes 1 worked me can call request , works me www.example.com/pagename => www.example.com/index.php?page=pagename here questions , please provide me information "in detail" understand code well 1- how convert request automatically www.example.com/index.php?page=pagename www.example.com/pagename 2- if tried add slash @ end shows me page without images or styling mean www.example.com/pagename => works www.example.com/pagename/ => doesn't work that's :) for first part need 301 rule this: rewritecond %{the_request} /index\.php\?page=([^\s&]+) [nc] rewriterule ^ /%1? [r=301,l] for second part use absolute path in css, js, images files r
Read more