jquery - change class name when dragged and dropped and vice versa - jqueryUI -

-

i'm using jqueryui drag/drop list items 1 list sortable list. there anyway can change class of dropped item 'sortedli' 'droppedli' when dropped all-colls-list sortable list coll-selected-list , vice versa? when drop it, retains original class name.

$(function() {     var lists = [{"listid":"#all-colls-list", "connectid":"#coll-selected-list", "drop":true},      {"listid":"#coll-selected-list", "connectid":"#all-colls-list", "drop":true}];      $.each(lists, function(i, list) {         $(list.listid).sortable({             connectwith: list.connectid,             droponempty: list.drop         });     }); });  <ul id="all-colls-list" class="droptrue ui-sortable">                 <li class="sortedli">ahsbah</li>                 <li class="sortedli">bachs</li>                 <li class="sortedli">stah</li> </ul>   <ul id="coll-selected-list" class="droptrue ui-sortable">               <li class="sortedli" style="">blah</li>               <li class="sortedli" style="">blah</li>               <li class="sortedli" style="">blah</li> </ul>

here complete solution changing class when on drag , drop events occurred using jquery ui.

html:

<ul id="all-colls-list" class="droptrue ui-sortable">   <li class="sortedli">       ahsbah   </li>   <li class="sortedli">       bachs   </li>   <li class="sortedli">       stah   </li> </ul>  <ul id="coll-selected-list" class="droptrue ui-sortable">   <li class="sortedli" style="">       blah   </li>   <li class="sortedli" style="">        blah   </li>   <li class="sortedli" style="">       blah   </li> </ul>

css:

#all-colls-list{    display:inline-block;    width:200px;    border:1px solid #331299;    background-color:#1177a8;    height:auto; }  #coll-selected-list{    display:inline-block;    width:200px;    border:1px solid #331299;    background-color:#a14466;    height:auto; } #all-colls-list li, #coll-selected-list li{    list-style:none; } #all-colls-list li:hover, #coll-selected-list li:hover{    cursor:move;    border:2px solid #a1b177; }  .dropped{    background-color:#2277a7; } .sorted{    background-color:#a74455; }

jquery:

var lists = [{               "listid": "#all-colls-list",               "connectid": "#coll-selected-list"             }, {               "listid": "#coll-selected-list",               "connectid": "#all-colls-list"            }];   //apply sort on each list   $.each(lists, function(i, list) {           $(list.listid).sortable({              connectwith: list.connectid,              opacity: 0.7,              start: function(event, ui) {                  if ($(ui.item).parents('#all-colls-list').length > 0) {                       $(ui.item).addclass('dropped');                  } else {                       $(ui.item).addclass('sorted');                  }              },             stop: function(event, ui) {                if ($(ui.item).parents('#all-colls-list').length > 0) {                     $(ui.item).switchclass('droppedli', 'sortedli');                } else {                     $(ui.item).switchclass('sortedli', 'droppedli');                }                $(ui.item).removeclass('sorted');                $(ui.item).removeclass('dropped');             }        });   });

note: please note before run above script, have include either full or min versions of latest jquery.js , latest jquery ui java script files.

i have created bin solution on http://codebins.com/codes/home/4ldqpc3


Comments

Post a Comment

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

-
i trying reposotries using c# code process svncommand = null; var psi = new processstartinfo("svnadmin"); psi.redirectstandardoutput = true; psi.redirectstandarderror = true; psi.useshellexecute = false; psi.arguments= @"dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump"; using (svncommand = process.start(psi)) { var myoutput = svncommand.standardoutput; var myerror = svncommand.standarderror; debug.write("output :" + environment.newline + environment.newline + myoutput.readtoend() + environment.newline + "error :" + environment.newline + environment.newline + myerror.readtoend()); svncommand.close(); } when use dump command commandline svnadmin dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump it works fine when try ...
Read more

c# - Copy ObservableCollection to another ObservableCollection -

-
how copy observablecollection item observablecollection without reference of first collection? here observablecollection item value changes affecting both collections. code private observablecollection<ratemodel> _allmetalrate = new observablecollection<ratemodel>(); private observablecollection<ratemodel> _metalrateondate = new observablecollection<ratemodel>(); public observablecollection<ratemodel> allmetalrate { { return this._allmetalrate; } set { this._allmetalrate = value; notifypropertychanged("metalrate"); } } public observablecollection<ratemodel> metalrateondate { { return this._metalrateondate; } set { this._metalrateondate = value; notifypropertychanged("metalrateondate"); } } foreach (var item in metalrateondate) allmetalrate.add(item); what causing , how can solve it? you need clone object referenced item before it's a...
Read more

All overlapping substrings matching a java regex -

-
is there api method returns (possibly overlapping) substrings match regular expression? for example, have text string: string t = 04/31 412-555-1235; , , have pattern: pattern p = new pattern("\\d\\d+"); matches strings of 2 or more characters. the matches are: 04, 31, 412, 555, 1235. how overlapping matches? i want code return: 04, 31, 41, 412, 12, 55, 555, 55, 12, 123, 1235, 23, 235, 35. theoretically should possible -- there obvious o(n^2) algorithm enumerates , checks substrings against pattern. edit rather enumerating substrings, safer use region(int start, int end) method in matcher . checking pattern against separate, extracted substring might change result of match (e.g. if there non-capturing group or word boundary check @ start/end of pattern). edit 2 actually, it's unclear whether region() expect zero-width matches. specification vague, , experiments yield disappointing results. for example: string line = "xx90xx"; strin...
Read more