jquery - Draggable droppable knockoutjs sortable accordion and back... (puh) -


i have sortable jquery accordion customized each-loop data-binding. want drop item accordion , onto "parking place".

i used jquery ui´s "shopping cart" starting point.

this code:

first html accordion-loop:

<div id="accordion" data-bind="jqaccordion: { },template: { name: tasktemplate', foreach: tasks, afteradd: function(elem){$(elem).trigger('valuechanged');} }" class="group accordion ui-widget ui-helper-clearfix" ></div>     <!-------------------- template: begins --------------------->  <script type="text/html" task-template" >     <div data-bind="attr: {'id': 'task' + taskid}, click: $root.selectedtask" class="group ui-widget-content ui-corner-tr" >         <div class="accordion-header  ui-widget-header">             <table class="myaccordionheadertable" >                 <tbody>                     <tr>                         <td class="left-upper" ><label for="tasksequenceno">seq:</label> <span data-bind="text: tasksequenceno"></span>                         </td>                         <td class="center" rowspan="2" >                             <h3><input name="taskname" data-bind="value: taskname" /></h3>                         </td>                         <td class="right-upper" colspan="2">due: <span data-bind="text: duedate"></span>                         </td>                     </tr>                     <tr>                         <td class="left-bottom">id: <span data-bind="text: taskid" ></span></td>                         <td class="right-bottom" title="number of employees attached task">t: <span data-bind="text: taskemployees"></span></td>                     </tr>                 </tbody>             </table>         </div>         <div class="accordion-content">             <label for="description" >description:</label><textarea name="description" data-bind="value: description" class="description"></textarea>         </div>                           </div> </script> <!-------------------- template: ends ----------------------->

and "parking spot":

<div id="parking" class="ui-widget-content ui-state-default">     <h2 class="ui-widget-header">parking</h2>     <div class="ui-widget-content">         <div>             <span class="placeholder">park tasks here</span>         </div>     </div> </div>

the data-binding of accordion (interesting part "$(element).draggable(...)" @ bottom):

ko.bindinghandlers.jqaccordion = {     init: function (element, valueaccessor) {         var options = valueaccessor();         $(element).accordion(options);         $(element).bind("valuechanged", function () {             ko.bindinghandlers.jqaccordion.update(element, valueaccessor);        });     },     update: function (element, valueaccessor) {     var options = valueaccessor();      $(element).accordion("destroy").accordion({         header: ".accordion-header",         collapsible: true,         navigation: true,         heightstyle: "content",         active: false     })         .sortable({             axis: "x, y",             handle: ".accordion-header",             placeholder: "ui-state-highlight",             start: function (event, ui) {                 //change bool true                 sorting = true;                  //find tab open, false if none                 active = $(this).accordion("option", "active");                  //possibly change animation here (to make animation instant if like)                 $(element).accordion("option", "animate", {                     easing: 'swing',                     duration: 0                 });                  //close tab                 $(element).accordion({                     active: false                 });             },             over: function (event, ui) {                 $(element).accordion({                     active: false                 });             },             stop: function (event, ui) {                 //1st: handle visible impression during sorting...                 // ie doesn't register blur when sorting trigger focusout handlers remove .ui-state-focus                 ui.item.children("h3").triggerhandler("focusout");                 //possibly change animation here; { } default value                 $(element).accordion("option", "animate", {});                 //open active panel - set active 'false' maintain closed.                 active = false;                 $(element).accordion("option", "active", active);                 //change bool false                 sorting = false;                 //alert("element=" + element);                 //2nd: create sequence listing of items later saving                 var items = [];                 var itemseqnos = [];                  ui.item.siblings().andself().each(function () {                     //compare data('index') , real index                     if ($(this).data('index') != $(this).index()) {                         items.push(this.id);                         itemseqnos.push(this.id.replace("task", "")); // remove prefix ("task") build sequenceno-array... nb!! record been built items involved , not whole list reduce traffic ????                     }                 });                  ui.item.parent().trigger('stop');                  //collect data accordion set selected , set new sequence no.                 var context = ko.contextfor(this);                 //add child appropriate parent, calling method off of main view model (context.$root)                 context.$root.isaccordionsorted(itemseqnos); // works!!!             }         })         .on({             click: function () {                 $("#debug").text("-on click: ");                 settimeout(function () {                     $("#debug").text("------");                 }, 1000);             },             stop: function () {                 $("#debug").text("-on stop");                 $(this).siblings().andself().each(function (i) {                     $(this).data('index', i);                 });             }         })         .trigger('stop');     $(element).draggable({             handle: "div.accordion-header",             axis: "x, y",             cancel: "invalid",             cursor: "move",             appendto: "body",             helper: "clone"         }); }

};

then @ last droppable code "parking spot":

<script> $(function() {     $("#parking div").droppable({         activeclass: "ui-state-default",         hoverclass: "ui-state-hover",         accept: ":not(.ui-sortable-helper)",         drop: function(event, ui){             $(this).find(".placeholder").remove();             $("<div></div>").text( ui-draggable.text() ).appendto(this);         }     }).sortable({         items:"span:not(.placeholder)",         sort: function(){             // gets addde unintentionally droppable interacting sortable             // using connectwithsortable fixed this, doesn\t allow customizee active/hoverclass options             $(this).removeclass("ui-state-default");         }     });  }); </script>

basically want is: 1. being able drag drop item accordion " 2. drop item onto "parking spot" 3. hide duedate , taskemployees taskname in accordion-header.

next step: 4. drag , drop item parking.


Comments

Post a Comment

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

i seeing strange behavior cryptstringtobinary cryptography api. please see below code (config: x64 debug): #include "stdafx.h" #include <windows.h> #include <strsafe.h> #include <iostream> #include <exception> void main() { dword dwskip; dword dwflags; dword dwdatalen; //lpcwstr pszinput = l"jaaaaaecaaadzgaaakqaagdnnl1l56bwgfjdgr3rpxtqqqn6daw3usv2emkjym4t"; //this works fine lpcwstr pszinput = l"mytest"; //doesnt work, api returns false,error code 0x0000000d // determine size of byte array , allocate memory. if(! cryptstringtobinary( pszinput, _tcslen( pszinput ) + 1, crypt_string_base64, null, &dwdatalen, &dwskip, &dwflags ) ) { dword dw = getlasterror(); //0x0000000d: data invalid throw std::exception( "error computing byte length." ); } byte *pbytebyte = null; try { ...
Read more

c++ - Correct method for redrawing a layered window -

i have window created ws_ex_layered window style. drawing onto memory bitmap using gdi+, , using updatelayeredwindow update graphical content of layered window. intend use window main window of application, require redraw frequently. seeing layered windows not receive wm_paint windows message [?] , need come appropriate method re-drawing window. optimisation not essential , it's nice have cake , eat too. therefore, in search of "correct" method use. here thoughts far: i guess it's idea render onto off-screen bitmap before bitblt ing or similar. 60 frames rendered per second should (more than?) enough (but how compare other applications' frame rates?). possible solutions: use settimer send wm_timer message on regular basis. useful because through specifying time-out value, can achieve desired frames per second, without requirement measure duration "frame" takes rendered. would cause input or other lags due frequency , speed of m...
Read more

java.util.scanner - How to read and add only numbers to array from a text file -

i'm learning java , have question regarding reading file want read numbers file contains strings well. here example of file: 66.56 "3 java 3-43 5-42 2.1 1 and here coding: public class test { public static void main (string [] args){ if (0 < args.length) { file x = new file(args[0]); try{ scanner in = new scanner( new fileinputstream(x)); arraylist<double> test = new arraylist<>(); while(in.hasnext()){ if(in.hasnextdouble()){ double f=in.nextdouble(); test.add(f);} else {in.next();} } catch(ioexception e) { system.err.println("exception during reading: " + e); } } my problem add 66.56,2.1 , 1 doesn't add 3 after "3 or ignores 3-43 , 5-42 can tell me how skip strings , add doubles here? thanks all said 3 ie; "3, 3-43 , 4-42 strings either u read string , split , check number @ " , - or put in space between characters , integers. jvm after compilation tre...
Read more