{"id":16740,"date":"2018-02-11T00:36:32","date_gmt":"2018-02-11T00:36:32","guid":{"rendered":"https:\/\/www.muvipa.com.mx\/registro\/assets\/js\/aci-tree\/acitree-drag-drop-sorting-demo-a-treeview-control-with-jquery\/"},"modified":"2018-02-11T00:36:32","modified_gmt":"2018-02-11T00:36:32","slug":"acitree-drag-drop-sorting-demo-a-treeview-control-with-jquery","status":"publish","type":"page","link":"https:\/\/www.muvipa.com.mx\/?page_id=16740","title":{"rendered":"aciTree drag & drop sorting demo – A treeview control with jQuery"},"content":{"rendered":"
\n

The sortable<\/i> extension is using the aciSortable plugin, the available callback init options and the options parameter of the event handler
\n receives the properties as defined by aciSortable (see the docs). aciTree adds a few extra events on top of aciSortable so we can handle
\n with ease the drag start and check for a valid drop target. In this way we can limit what items can be dragged and where they can be dropped.<\/p>\n

For dragging tree items out of the tree – check this<\/a> demo.<\/p>\n

See the examples below for what can be done by responding to only two events: beforedrag<\/b> and checkdrop<\/b>.<\/p>\n

Note: you can also implement your own options.sortDrag<\/b> and options.sortValid<\/b>
\n callbacks to set the helper (the element that follows the mouse pointer when in drag) the way you want.
\n For the default implementation – check the source code of the sortable<\/i> extension.<\/p>\n

The default implementation (options.sortable<\/b> needs to be active), you can drag & drop items anywhere, before or after another one,
\n set as a child of a leaf node (it will be transformed in a inode by default), the parent can be changed:<\/p>\n

\n
\n see the JSON behind this tree<\/a>
\n
The easy way to find a car that’s right for you<\/div>\n<\/div>\n
Tree Log… clear log<\/a><\/p>\n
<\/div>\n
\n

<\/p>\n

Limit the number of newly created tree levels to only #3 (we wont be able to add more than #3 levels deep but still be able to sort
\n existing items in more than #3 levels deep):<\/p>\n

\n
\n see the JSON behind this tree<\/a>
\n
The easy way to find a car that’s right for you<\/div>\n<\/div>\n
Tree Log… clear log<\/a><\/p>\n
<\/div>\n
\n

= 2) {
\n \/\/ mark the drop target as invalid
\n return false;
\n }
\n } else {
\n if (options.before === null) {
\n \/\/ container creation is disabled for levels >= #3
\n var target = api.itemFrom(options.hover);
\n if (api.level(target) >= 2) {
\n \/\/ mark the drop target as invalid
\n return false;
\n }
\n }
\n }
\n break;
\n }
\n });<\/p>\n

\/\/ init the tree
\n $(‘#tree2’).aciTree({
\n ajax: {
\n url: ‘json\/checkbox-radio-button.json’
\n },
\n sortable: true
\n });<\/p>\n

});<\/p>\n

]]><\/p>\n

<\/p>\n

Limit the items that can be dragged around to just leaf items:<\/p>\n

\n
\n see the JSON behind this tree<\/a>
\n
The easy way to find a car that’s right for you<\/div>\n<\/div>\n
Tree Log… clear log<\/a><\/p>\n
<\/div>\n
\n

<\/p>\n

Items can be dragged around only inside the same parent (items can’t change parent):<\/p>\n

\n
\n see the JSON behind this tree<\/a>
\n
The easy way to find a car that’s right for you<\/div>\n<\/div>\n
Tree Log… clear log<\/a><\/p>\n
<\/div>\n
\n

<![CDATA[<\/p>\n

$(function() {<\/p>\n

\/\/ write to log
\n $('[id^=tree]').on('acitree', function(event, api, item, eventName, options) {
\n var log = $(this).next('.log').find('div');
\n if (api.isItem(item)) {
\n log.prepend('<\/p>\n

‘ + eventName + ‘ [‘ + api.getId(item) + ‘]’);
\n } else {
\n log.prepend(‘<\/p>\n

‘ + eventName + ‘ [tree]’);
\n }
\n });<\/p>\n

$(‘.clear_log’).click(function() {
\n $(this).closest(‘.log’).find(‘div’).html(\u00bb);
\n return false;
\n });<\/p>\n

});<\/p>\n

]]><\/p><\/div>\n

<![CDATA[<\/p>\n

$(function() {<\/p>\n

$('script.code').each(function() {
\n $(this).before('<\/p>\n

\n
');
\n                    $(this).prev('div').find('pre').text($(this).html());
\n                });<\/p>\n
            });<\/p>\n
        ]]><\/p>\n","protected":false},"excerpt":{"rendered":"
A demo to show you how aciTree can be used with aciSortable, check the plugin page to see all the functions exposed by the API<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":16738,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-16740","page","type-page","status-publish","hentry","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author",""],"yoast_head":"\naciTree drag & drop sorting demo - A treeview control with jQuery - Museo Virtual de Pachuca<\/title>\n<meta name=\"description\" content=\"Conoce m\u00e1s sobre la Ciudad de Pachuca a trav\u00e9s del museo virtual de Pachuca, descubre las galer\u00edas, juegos y articulos que tenemos para ti.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.muvipa.com.mx\/?page_id=16740\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"aciTree drag & drop sorting demo - A treeview control with jQuery - Museo Virtual de Pachuca\" \/>\n<meta property=\"og:description\" content=\"Conoce m\u00e1s sobre la Ciudad de Pachuca a trav\u00e9s del museo virtual de Pachuca, descubre las galer\u00edas, juegos y articulos que tenemos para ti.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.muvipa.com.mx\/?page_id=16740\" \/>\n<meta property=\"og:site_name\" content=\"Museo Virtual de Pachuca\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/museovirtualpachuca\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@MUSEOMUVIPA\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.muvipa.com.mx\\\/?page_id=16740\",\"url\":\"https:\\\/\\\/www.muvipa.com.mx\\\/?page_id=16740\",\"name\":\"aciTree drag & drop sorting demo - A treeview control with jQuery - Museo Virtual de Pachuca\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.muvipa.com.mx\\\/#website\"},\"datePublished\":\"2018-02-11T00:36:32+00:00\",\"description\":\"Conoce m\u00e1s sobre la Ciudad de Pachuca a trav\u00e9s del museo virtual de Pachuca, descubre las galer\u00edas, juegos y articulos que tenemos para ti.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.muvipa.com.mx\\\/?page_id=16740#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.muvipa.com.mx\\\/?page_id=16740\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.muvipa.com.mx\\\/?page_id=16740#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/www.muvipa.com.mx\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Registro\",\"item\":\"https:\\\/\\\/www.muvipa.com.mx\\\/?page_id=16721\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Assets\",\"item\":\"https:\\\/\\\/www.muvipa.com.mx\\\/?page_id=16731\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Js\",\"item\":\"https:\\\/\\\/www.muvipa.com.mx\\\/?page_id=16737\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Aci Tree\",\"item\":\"https:\\\/\\\/www.muvipa.com.mx\\\/?page_id=16738\"},{\"@type\":\"ListItem\",\"position\":6,\"name\":\"aciTree drag & drop sorting demo – A treeview control with jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.muvipa.com.mx\\\/#website\",\"url\":\"https:\\\/\\\/www.muvipa.com.mx\\\/\",\"name\":\"MUVIPA\",\"description\":\"Museo Virtual de Pachuca\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.muvipa.com.mx\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.muvipa.com.mx\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.muvipa.com.mx\\\/#organization\",\"name\":\"Museo Virtual de Pachuca\",\"url\":\"https:\\\/\\\/www.muvipa.com.mx\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.muvipa.com.mx\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.muvipa.com.mx\\\/wp-content\\\/uploads\\\/2018\\\/09\\\/cropped-principal.jpg\",\"contentUrl\":\"https:\\\/\\\/www.muvipa.com.mx\\\/wp-content\\\/uploads\\\/2018\\\/09\\\/cropped-principal.jpg\",\"width\":512,\"height\":512,\"caption\":\"Museo Virtual de Pachuca\"},\"image\":{\"@id\":\"https:\\\/\\\/www.muvipa.com.mx\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/museovirtualpachuca\\\/\",\"https:\\\/\\\/x.com\\\/MUSEOMUVIPA\",\"https:\\\/\\\/www.instagram.com\\\/muvipa\\\/\",\"https:\\\/\\\/www.pinterest.com.mx\\\/holamuvipa\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCG-A1s9_Q6fGShym1BHj6Hg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"aciTree drag & drop sorting demo - A treeview control with jQuery - Museo Virtual de Pachuca","description":"Conoce m\u00e1s sobre la Ciudad de Pachuca a trav\u00e9s del museo virtual de Pachuca, descubre las galer\u00edas, juegos y articulos que tenemos para ti.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.muvipa.com.mx\/?page_id=16740","og_locale":"es_ES","og_type":"article","og_title":"aciTree drag & drop sorting demo - A treeview control with jQuery - Museo Virtual de Pachuca","og_description":"Conoce m\u00e1s sobre la Ciudad de Pachuca a trav\u00e9s del museo virtual de Pachuca, descubre las galer\u00edas, juegos y articulos que tenemos para ti.","og_url":"https:\/\/www.muvipa.com.mx\/?page_id=16740","og_site_name":"Museo Virtual de Pachuca","article_publisher":"https:\/\/www.facebook.com\/museovirtualpachuca\/","twitter_card":"summary_large_image","twitter_site":"@MUSEOMUVIPA","twitter_misc":{"Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.muvipa.com.mx\/?page_id=16740","url":"https:\/\/www.muvipa.com.mx\/?page_id=16740","name":"aciTree drag & drop sorting demo - A treeview control with jQuery - Museo Virtual de Pachuca","isPartOf":{"@id":"https:\/\/www.muvipa.com.mx\/#website"},"datePublished":"2018-02-11T00:36:32+00:00","description":"Conoce m\u00e1s sobre la Ciudad de Pachuca a trav\u00e9s del museo virtual de Pachuca, descubre las galer\u00edas, juegos y articulos que tenemos para ti.","breadcrumb":{"@id":"https:\/\/www.muvipa.com.mx\/?page_id=16740#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.muvipa.com.mx\/?page_id=16740"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.muvipa.com.mx\/?page_id=16740#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.muvipa.com.mx\/"},{"@type":"ListItem","position":2,"name":"Registro","item":"https:\/\/www.muvipa.com.mx\/?page_id=16721"},{"@type":"ListItem","position":3,"name":"Assets","item":"https:\/\/www.muvipa.com.mx\/?page_id=16731"},{"@type":"ListItem","position":4,"name":"Js","item":"https:\/\/www.muvipa.com.mx\/?page_id=16737"},{"@type":"ListItem","position":5,"name":"Aci Tree","item":"https:\/\/www.muvipa.com.mx\/?page_id=16738"},{"@type":"ListItem","position":6,"name":"aciTree drag & drop sorting demo – A treeview control with jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.muvipa.com.mx\/#website","url":"https:\/\/www.muvipa.com.mx\/","name":"MUVIPA","description":"Museo Virtual de Pachuca","publisher":{"@id":"https:\/\/www.muvipa.com.mx\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.muvipa.com.mx\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.muvipa.com.mx\/#organization","name":"Museo Virtual de Pachuca","url":"https:\/\/www.muvipa.com.mx\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.muvipa.com.mx\/#\/schema\/logo\/image\/","url":"https:\/\/www.muvipa.com.mx\/wp-content\/uploads\/2018\/09\/cropped-principal.jpg","contentUrl":"https:\/\/www.muvipa.com.mx\/wp-content\/uploads\/2018\/09\/cropped-principal.jpg","width":512,"height":512,"caption":"Museo Virtual de Pachuca"},"image":{"@id":"https:\/\/www.muvipa.com.mx\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/museovirtualpachuca\/","https:\/\/x.com\/MUSEOMUVIPA","https:\/\/www.instagram.com\/muvipa\/","https:\/\/www.pinterest.com.mx\/holamuvipa\/","https:\/\/www.youtube.com\/channel\/UCG-A1s9_Q6fGShym1BHj6Hg"]}]}},"brizy_media":[],"builder_content":"","_links":{"self":[{"href":"https:\/\/www.muvipa.com.mx\/index.php?rest_route=\/wp\/v2\/pages\/16740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.muvipa.com.mx\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.muvipa.com.mx\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.muvipa.com.mx\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.muvipa.com.mx\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16740"}],"version-history":[{"count":0,"href":"https:\/\/www.muvipa.com.mx\/index.php?rest_route=\/wp\/v2\/pages\/16740\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.muvipa.com.mx\/index.php?rest_route=\/wp\/v2\/pages\/16738"}],"wp:attachment":[{"href":"https:\/\/www.muvipa.com.mx\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}