html - JQuery UI Sortable Element not moving according to mouse -


i using jquery ui sortable. working fine except when drag element element element not moving according mouse pointer. pointer goes first , when pointer stops element comes pointer position. doing wrong or there setting this. code following:

jquery( "#test1" ).sortable({         start:function(event, ui) {           $("#test2").css('background-color','#ebf2f9');           $("#test2").css('border','2px dashed #3b73af');            $("#test3").css('background-color','#ebf2f9');           $("#test3").css('border','2px dashed #3b73af');         },         over: function(event, ui) {           var parent_id = ui.item.parent().attr('id');           if(parent_id != "test1") {             $("#test1").css('background-color','#f3f9f4');             $("#test1").css('border','2px dashed #14892c');           }         },         deactivate:function(event, ui) {           $("#test1").css('background-color','white');           $("#test1").css('border','none');         },         out:function(event, ui) {           var parent_id = ui.item.parent().attr('id');           if(parent_id != "test1") {             $("#test1").css('background-color','#ebf2f9');             $("#test1").css('border','2px dashed #3b73af');           }         },         stop: function( event, ui ) {           var accepted = $("#test1").sortable('toarray');           var pending = $("#test2").sortable('toarray');           var = $("#test3").sortable('toarray');           console.log(ui.item.html());           sendajaxrequest(all,accepted,pending);         },         receive:function( event, ui ) {           var item_id = ui.item.attr('id');           var sender_id = ui.sender.attr('id');           //updating counter           updatecounters(sender_id,'test1_count_display');           var html = ui.item.html();           ui.item.children('.post-icons').html('');         },         connectwith: ".sortable-scroll-holder"       }).disableselection();     }); 

and have total 3 sortable lists , of them connected each other. here great.

this html of 1 of elements:

<ul id="test1" class="connectedsortable1" style="min-height: 900px; float: left; width: 20%; margin: 0 5%; padding: 100px 0 0; list-style: none;">         <li id="aleem1" style="background-color: #000; color: #fff; padding: 10px; margin: 0 0 10px;">             <span class="name" style="display: none !important;" data-search-term="additonal additonal">additonal additonal</span>             <span class="title" style="display: none !important;" data-search-term="walt disney world">walt disney world</span>             <span class="company" style="display: none !important;" data-search-term="redsignal greensignal">redsignal greensignal</span>             <span class="email" style="display: none !important;" data-search-term="kashaf@asdasd.com">kashaf@asdasd.com</span>             <span class="network_group" style="display: none !important;" data-search-term=""></span>             <span class="department" style="display: none !important;" data-search-term="ddfdf">ddfdf</span>             <div class="img">               <img src="http://192.168.1.191:8000/images/speakers/no-img.jpg" alt="" width="38">             </div>             <div class="text">                 <h6>additonal attendee</h6>                 <div class="text-cs">                     <p>                   walt disney world @ redsignal greensignal                     </p>                     <p>department ddfdf</p>                 </div>             </div>             <ul class="post-icons"></ul>         </li> </ul> 

most have code being fired per step of drag. @ execute per step , reduce or remove it. usual jquery dom performance aspects appropriate, such caching elements avoid repeating selections etc.


Comments

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -