Having Jquery sortable within droppable and draggable <div> -


i working on feature need combine droppable, draggable , sortable feature @ same time. below test code. sorry since not able jsfiddle code. droppable , draggable working fine.

problem: getting hard time horizontal sort within droppable div. appreciate if can help/guide me along index/position of element in sorted list whether element @ 1st, 2nd etc position.

html: 

        <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">           <li class="ui-widget-content ui-corner-tr">             <div class="ui-widget-header">high tatras 1</div>           </li>           <li class="ui-widget-content ui-corner-tr">             <div class="ui-widget-header">high tatras 2</div>           </li>           <li class="ui-widget-content ui-corner-tr">             <div class="ui-widget-header">high tatras 3</div>           </li>           <li class="ui-widget-content ui-corner-tr">             <div class="ui-widget-header">high tatras 4</div>           </li>         </ul>          <div id="trash" class="ui-widget-content ui-state-default">             <ul id = "sortable" class='gallery ui-helper-reset sortable'></ul>         </div>

above html code using test data.

jquery: below jquery code using.

                   var $gallery = $( "#gallery" ),                    $trash = $( "#trash" );                   // let gallery items draggable                  $( "li", $gallery ).draggable({                    cancel: "a.ui-icon", // clicking icon won't initiate dragging                    revert: "invalid", // when not dropped, item revert initial position                    containment: "document",                    helper: "clone",                    cursor: "move"                  });                   // let trash droppable, accepting gallery items                  $trash.droppable({                    accept: "#gallery > li",                    activeclass: "ui-state-highlight",                    drop: function( event, ui ) {                      addtocontainer( ui.draggable );                    }                  });                   // let gallery droppable well, accepting items trash                  $gallery.droppable({                    accept: "#trash li",                    activeclass: "custom-state-active",                    drop: function( event, ui ) {                      removefromcontainer( ui.draggable );                    }                  });                   function addtocontainer( $item ) {                    $item.fadeout(function() {                      var $list = $( "ul", $trash );                       $item.appendto($list).fadein(function() {                        $item                          .addclass('ui-state-default')                          .find( "div .ui-widget-header" )                            .animate({ height: "36px"});                      });                    });                     $( ".sortable" ).sortable({                        connectwith: "#sortable"                    }).disableselection();                   }                   function removefromcontainer( $item ) {                    $item.fadeout(function() {                      $item                        .find( "a.ui-icon-refresh" )                          .remove()                        .end()                        .css( "width", "96px")                        .find( "img" )                          .css( "height", "72px" )                        .end()                        .appendto( $gallery )                        .fadein();                    });                  }                   // resolve icons behavior event delegation                  $( "ul.gallery > li" ).click(function( event ) {                     var $item = $( ),                      $target = $( event.target );                     if ( $target.is( "a.ui-icon-trash" ) ) {                      addtocontainer( $item );                    } else if ( $target.is( "a.ui-icon-refresh" ) ) {                      removefromcontainer( $item );                    }                     return false;                  });

please let me know if there missing , failed post correct question. did research on stackoverflow still couldn't find exact solution. thank in advance.

use 2 sortable , set connectwith property each other:

var $gallery = $("#gallery"),     $trash = $("#trash"); $("#gallery").sortable({     connectwith: "#trash",     helper: "",     revert: "invalid",     start: function (event, ui) {         var $item = ui.helper;         $item.css({             'width': $('#gallery li').width()         });     },     stop: function (event, ui) {        //get want here     } });  $('#trash').sortable({     placeholder: "ui-state-highlight",     connectwith: '#gallery',     revert: true,     cursor: "move",     items: "li",     drop: function (event, ui) {      },     stop: function (event, ui) {         var $obj = $(ui.item);        //get want here     } });

try working fiddle:

http://jsfiddle.net/mw3pn/2/


Comments

Post a Comment

Popular posts from this blog

ios - iPhone/iPad different view orientations in different views , and apple approval process -

i force app's home screen portrait , other views landscape. apple rejects app if this? if not , how force first screen launch in portrait mode? , force other screens launch in landscape. this not duplicate question search every possible answer in website. i force app's home screen portrait , other views landscape. apple rejects app if this? no apple not reject app this. have lot of apps doesn't support orientation. forcing on 1 screen won't cause app reject. if not , how force first screen launch in portrait mode? , force other screens launch in landscape. can on write : -(nsuinteger)supportedinterfaceorientations; function.
Read more

php - HTTP_REFERER woes: How can I allow access to a specific page, only when a visitor has visited another specific page beforehand? -

php newbie here, struggling crazy head around how go implementing http_referer-based security feature woefully inept downloads system. basically, have file download pages have specific string appended end of url, specific string being: ?thanks if visible in url, users able download file situated on it. works great, it's easy 'unlock' page adding '?thanks' part onto url themselves. allowing users bypass clumsy security , access premium files ease. if possible, i'd add security measure whereby attempting access page containing string '?thanks' did not arrive page containing '?pending' redirected homepage. make perfect solution me. just clarity, typical pre-download process goes this: user visits download page: [website]/download/page/123/ user completes recaptcha, gets redirected here: [website]/download/page/123/?pending user fills in details, gets redirected here: [website]/download/page/123/?thanks user receives file long-...
Read more

java Extracting Zip file -

i'm looking way extract zip file. far have tried java.util.zip , org.apache.commons.compress, both gave corrupted output. basically, input zip file contain 1 single .doc file. java.util.zip: output corrupted. org.apache.commons.compress: output blank file, 2 mb size. so far commercial software winrar work perfectly. there java library make use of this? this method using java.util library: public void extractzipnative(file filezip) { zipinputstream zis; stringbuilder sb; try { zis = new zipinputstream(new fileinputstream(filezip)); zipentry ze = zis.getnextentry(); byte[] buffer = new byte[(int) ze.getsize()]; fileoutputstream fos = new fileoutputstream(this.tempfolderpath+ze.getname()); int len; while ((len=zis.read(buffer))>0) { fos.write(buffer); } fos.flush(); fos.close(); } catch (filenotfoundexception e) { // todo auto-generated catch block ...
Read more