javascript - Drag, Drop, Sort, Clone and Change Class Not Working -

-

here's i'm trying accomplish

(version 2.0 new code updates)

i'm trying create module has 2 columns. left , right. want buttons in left column when dropped right change classes. when buttons on left dropped on right want them call animated class per-defined transitions in larger image. these boxes drag , droppable in right column.

again need module drag, drop, clone, sort , change classes. have figured out except changing of classes. i've been working on time insight appreciated. thanks.

here's picture , code

here's picture of i'm trying accomplish - twitter pic.

here's my new fiddle project.

suggested code isn't working

here's latest effort alter javascript advised on post. script still isn't working. understand i'm trying do, missing. little anyone?

$('ui-sortable-handle').droppable({     drop: function(event, ui) {        if($(this).attr('id').indexof('music')){        $(this).addclass("droppedlimusic");     }         else if($(this).attr('id').indexof('nav')){        $(this).addclass("droppedlinav");     } }, over: function(event, ui) {}, out: function(event, ui) {} });

the following code version 3 of work still isn't working...sigh..

$("#left-pane li").draggable({     containment: '#gbox',     cursor: 'move',     helper: 'clone',     scroll: false,     connecttosortable: '#right-pane',     appendto: '#right-pane',     start: function () {},     stop: function (event, ui) {} }).mousedown(function () {});  $("#right-pane").sortable({     sort: function () {},     placeholder: 'ui-state-highlight',     receive: function () {},     update: function (event, ui) {} });  $("#right-pane li").live('dblclick', function () {     $(this).remove(); })  $("#right-pane").droppable({     accept: "#left-pane li",     accept: ":not(.ui-sortable-helper)",     drop: function (event, ui) {         if ($(ui.draggable).find('.single-item').length == 0) {             $(ui.draggable).append("<div class='single-item'><input type='text' class='item-title' /><br /><textarea class='item-text'></textarea></div>");         }     } });  $("#left-pane").droppable({     accept: "#right-pane li",     drop: function (event, ui) {} });  $("ul, li").disableselection();

original module html

<div class="wrapper">     <div class="left-column">         <ul id="left-pane">             <li class="music"><a href=""><img src="http://www.natebal.com/images/seo.jpg" width="55px" /></a></li>             <li class="nav"><a href=""><img src="http://www.natebal.com/images/social-networks.jpg" width="55px" /></a></li>             <li class="phone"><a href=""><img src="http://www.natebal.com/images/sweet-web-development.jpg" width="55px" /></a></li>         </ul>     </div>     <div class="right-column">         <ul id="right-pane"></ul>     </div> </div>

i think searching for..

if($('#music').hasclass('droppedlimusic')){    //your code }

Comments

Post a Comment

Popular posts from this blog

javascript - how to protect a flash video from refresh？ -

-
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>flash video refresh</title> </head> <body> <div id="playerzone"><embed height="496" width="580" flashvars="flvid=19742822&amp;createtime=2012-4-19 13:46:33" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#000000" name="player" id="player" src="swf/mine.swf" type="application/x-shockwave-flash"></div> <a onclick="return test();" id="test">click me popup div,and hide scrollbar</a> </body> the code upon： for example,when click a#test button,popup div,it's no problem,but want hide scrollbar while div popup. i used $('html').css('overflow','hidden') in
Read more

android - Associate same looper with different threads -

-
Image
in application, want create multiple threads working on single queue. create queue know need call looper.prepare() . i want other threads create should associated looper created first thread, how can achieve this? use 1 of java thread safe queue class java.util.concurrent package instead of looper achieve goal. it's more common practice. share queue between threads , post task queue entry 1 thread can entry thread. blockingqueue can - in 1 thread call take() , block thread until thread put() entry queue. that's all. producer consumer pattern example blockingqueue or concurrentlinkedqueue about blockingqueue
Read more

visual studio 2010 - Connect to informix database windows form application -

-
i trying figure out how connect ibm informix database. have been doing research , have found threads 5 years ago examples not working. i have installed latest sdk ibm informix. i have included ibm.data.informix.dll references in project. i have included using ibm.data.informix; i adding button , on click testing conenction. debug error "sql0035n file "c:\users\adam\documents\visual studio 2010\projects\test\test\msg\en_us\db2nmp.xml" cannot opened." this file not exist , dont see anywhere in program files (x86)\ibm informix client sdk directory. my on click code is private void button1_click(object sender, eventargs e) { const string host = "192.168.obfuscated"; const string servicenum = "1525"; //port? const string server = "serverobfuscated"; const string database = "dbobfuscatedy"; const string user = "myusername"; const string password = &
Read more