Dynamically nested droppable of jquery droppable using AJAX and PHP -


i want create template creation web app , ui using jquery drag , drop functionality.

into ui there 3 different type of list item can drag , drop.

1) template (1st level, main container) can 1 item @ level.

2) container (2nd level, div can many , organised liner layout way).

3) blocks (3rd level, image tag, input-text).

i using ajax call php fetch template file content , response of html string.

problem if add multiple 2nd level container on 3rd level difficult understand drop item.

here code

//container drag , drop   $('.container_list_item').draggable({    cursor: 'move',    helper: "clone"   });  /*template drag , drop */ $('.template_list_item').draggable({   cursor: 'move',   helper: "clone"  });   /* block drag , drop */  $('.block_list_item').draggable({    cursor: 'move',    helper: "clone"   });  $("#newsletterzone").droppable({    drop: function(event, ui) {     var templateitemid = $(event.originalevent.toelement).attr("templateitemid");     var containeritemid = $(event.originalevent.toelement).attr("containeritemid");      if (typeof templateitemid !== typeof undefined && templateitemid !== false) {         var itemidarray = templateitemid.split('_');         //call template ajex if itemidarray[0] 'template'.         if(itemidarray[0] == "template") {             $('.template_list_item').each(function() {                 if ($(this).attr("templateitemid") === templateitemid) {                     $(this).appendto("#selected_container_template");                 }             });             $.ajax({                 type: "post",                 url: 'ajx_functionswypnewsletter.php',                 data: {                     func: 'initializetemplateview',                     itemid: templateitemid,                 },                 success: function(res) {                     $("#newsletterzone").html(res);                 },             });         }     }else if (typeof containeritemid !== typeof undefined && containeritemid !== false) {         var itemidarray = containeritemid.split('_');         //call template ajex if itemidarray[0] 'template'.         if(itemidarray[0] == "container") {             $('.container_list_item').each(function() {                 if ($(this).attr("containeritemid") === containeritemid) {                     $(this).appendto("#selected_container_template");                 }             });             $.ajax({                 type: "post",                 url: 'ajx_functionswypnewsletter.php',                 data: {                     func: 'initializecontainerview',                     itemid: containeritemid,                 },                 success: function(res) {                     var htmlstring = $("#containerdivid").html();                     $("#containerdivid").html(htmlstring + res);                    },                 });           }       }    }   });

* answer:- solved issue *

$("#newsletterzone").droppable({  hoverclass:'bg-change',  drop: function(event, ui) {     if(!$(this).is('.newsletterzone')){         return false;     }

and ajax complete remove newsletterzone class , initialise new dropping zone

complete: function () {     $("#newsletterzone").removeclass('newsletterzone');     initializecontainerdroppable(); }

this second level dynamic dropping zone addition.

   $(".extraspaceclass").droppable({      hoverclass: "bg-change",      drop: function(event, ui) {...

into complete event of ajax call call function initialise 3rd level of drop zone.


Comments

Post a Comment

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

while performing simple hover test on firefox through selenium (3.4.0) python bindings (3.4.3) using of available os in saucelabs (except linux, latest available firefox version old), performing following actionchain: hover = actionchains(driver) hover.move_to_element(elm_men_menu).perform() it throws following error: taceback: file [...] in testhover hover.perform() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 80, in perform action() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 290, in <lambda> command.move_to, {'element': to_element.id})) file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/webdriver.py", line 256, in execute self.error_handler.check_response(response) file "/usr/local/lib/python2.7/...
Read more

html - How to custom Bootstrap grid height? -

why bootstrap grid has height 591.067 ? did height came ? .main-post { padding: 20px; background-color: #fff; border: 1px solid #d8d8d8; margin-bottom: 100px; } .main-post .post-categories { margin-bottom: 10px } .main-post h3 { margin: 0 0 10px; color: #777; letter-spacing: -1px; font-weight: bold } .main-post .post-author, .main-post .post-date, .main-post .post-comments { font-size: 12px } .main-post img { display: block; margin: 10px 0; } .main-post .post-summary { line-height: 1.7; color: #888 } .main-post { color: #999 } <div class="col-sm-6"> <div class="main-post"> <h3 class="post-title"> <a href="#"> post title </a> </...
Read more

angular - Copying node modules to wwwroot AspNetCore -

i working on aspnet core web application angular 2. since angular 2 requires node modules, install dependencies using package.json. creates folder in solution level. since aspnetcore application reference can access wwwroot folder each , every time tend copy node modules folder manually wwwroot folder. approach should fine long not adding new dependency. if keep on adding new packages painful copy manually every time. solution ? i wouldn't copy node_modules wwwroot folder, because contains lot of stuff you'll never need. copy needed stuff wwwroot . best way so, using webpack. wrote lines in posts: http://asp.net-hacker.rocks/2016/09/19/aspnetcore-and-angular2-using-dotnetcli-and-vscode.html http://asp.net-hacker.rocks/2016/09/19/aspnetcore-and-angular2-using-dotnetcli-and-vscode.html this posts using angular2, , outdated, concepts of using webpack still same. option use grunt or gulp copy needed javascript files wwwroot : http://asp.net-hacker.rock...
Read more