css - jquery ui: drag and drop - mouse selection incorrect -
i'm working on drag , drop navigation setup client.
i have drag , drop working (in basic form) when click on 1 of list items dragged actual droppable box coming though @ different location.
it's hard 1 explain without showing have online here: http://jsfiddle.net/elogicmedia/nvpyq/7/
css li , tags
li { color: black; list-style: none; padding: 1em 1em; } { position: absolute; text-decoration: none; border: 0px solid black; width:98px; height:98px; border-radius:50%; line-height:1.5em; text-align:center; font-family: helvetica, arial; background-color: #c0d9d9; }
js drag , droppable code
// let gallery items draggable $( "li" ).draggable({ revert: "invalid", // when not dropped, item revert initial position containment: "document", helper: "clone", cursor: "move" }); // let trash droppable, accepting gallery items $( "#droparea" ).droppable({ accept: "ul.gallery > li", activeclass: "ui-state-highlight", drop: function( event, ui ) { alert('dropped'); //deleteimage( ui.draggable ); } });
also note borders right of fiddle, definaly not right there either. shouldn't there, circles. screenshot jsfiddle setup below.
thankyou
i ended working out myself.
the working result here:
http://jsfiddle.net/elogicmedia/nvpyq/12/
i trying drop li tags tags circles, boxes right li tags.
new drag , drop code
// let gallery items draggable $( "ul.gallery > li a" ).draggable({ revert: "invalid", // when not dropped, item revert initial position containment: "document", helper: "clone", cursor: "move" }); // let trash droppable, accepting gallery items $( "#droparea" ).droppable({ accept: "ul.gallery > li a", activeclass: "ui-state-highlight", drop: function( event, ui ) { alert('dropped'); //deleteimage( ui.draggable ); } });
Comments
Post a Comment