javascript - How to increase JSTree drop area -


i using jstree build tasks on calender. have set div on tree initialised min height of 50px, means when dragging first node onto empty tree can drop anywhere within 50px great.

however if want drop node (onto main tree branch) drop on top of previous node, means user needs exact dropping

here div container 


here code jstree attached:

    daytree = moment.format('dd-mm-yyyy');     $('#' + daytree).jstree({         "core": {             "id": moment.format('dd-mm-yyyy'),             "animation": 150,             'check_callback': function (operation, node, node_parent, node_position, more) {                 return true;  //allow other operations             },             "themes": {"stripes": false},             "data": {                 async: false,                 "url": apiurl+"/shiftassignments?asg_date=" + moment.format('yyyy-mm-dd'),                 "datatype": "json",                 "success": function (data) {                  }             }         },         "rules": {             droppable: ["tree-drop"],             multiple: true,             deletable: "all",             draggable: "all"         },         "contextmenu": {             'items' : getcontextmenu         },         "types": {             "#": {                 "valid_children": ["sh_ls", "sh_as", "to_ls", "to_as"]             },             "sh_as": {                 "valid_children": ["st_ls", "st_as"]             },             "to_as" : {                 "valid_children" : ["st_ls", "st_as"]             },             "to_ls" : {                 "valid_children" : [""]             },             "sh_ls": {                 "valid_children": [""]             },             "st_ls": {                 "valid_children": [""]             },             "st_as": {                 "valid_children": [""]             }         },         "dnd": {             open_timeout: 100,             always_copy: true,             large_drop_target: true         },         "plugins": ["contextmenu", "dnd", "types"]      })

attached screenshot explain!

i guess increase drop-zone , have 'snap-to' effect main '#' node. maybe not possible?

screenshot

i listen events on div container second tree , if dragged item dropped on container , second tree has root, add there.

the code below. see demo - fiddle.

var oversecondtree = false;  $(document).on('dnd_move.vakata', function(e, data) {     // change icon `allow drop` if first tree , on second tree single root node    if ( $('#tree2 li').length === 1 && oversecondtree ) {         // change icon `allow drop`               $('#vakata-dnd').find('i').removeclass('jstree-er').addclass('jstree-ok');     } else {                 // change icon `restrict drop`         $('#vakata-dnd').find('i').removeclass('jstree-ok').addclass('jstree-er');     } });  $(document).on('dnd_stop.vakata', function(e, data) {     // allow drop tree2 if single root node     if ( $('#tree2 li').length === 1 && oversecondtree) {         $("#tree2").jstree().create_node('#roottree2', data.element.text);     }     })  $("#tree2").mouseenter(function(event){      oversecondtree = true;    if ( $('#tree2 li').length === 1 ) {       $('#roottree2').addclass('highlighted');          } })  $("#tree2").mouseleave(function(event){    oversecondtree = false;    $('#roottree2').removeclass('highlighted'); })

Comments

Post a Comment

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

Image
recently have uploaded wordpress site onto server. have uploaded wordpress site in sub-folder under root folder ../root(domain root folder)/wordpress (where host wordpress folder). now problem content data in page or post in dashboard of wordpress admin panel not showing - see image. but data showing in front view - see image. if not browser cache issue , not issue happened tinymce editor during upgrade; try add config file: define('concatenate_scripts', false);
Read more

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

i trying ip address of vm , trying use establish ssh vm. following script: --- - hosts: localhost become: yes connection: local gather_facts: false serial: 1 vars_files: - createvmvars.yml tasks: - name: gathering vm info. vsphere_guest: vcenter_hostname: "{{vcenter_hostname}}" username: "{{vcenter_username}}" password: "{{vcenter_password}}" guest: "{{guest_name}}" vmware_guest_facts: yes register: var - debug: msg="{{var.ansible_facts.hw_eth0.ipaddresses[0]}}" - name: establishing ssh connection. script: /home/shasha/devops/scripts/ssh_configure.sh "{{var.ansible_facts.hw_eth0.ipaddresses[0]}}" following content of ssh_configure.sh : #!/bin/sh ssh-keygen -t rsa ssh-copy-id $1 but when running playbook, getting following error while executing third task: error! 'var' undefined but debug module(second task) printin
Read more

javascript - Get parameter of GET request -

i make request: createxhrrequest( "get", fileurl, function( err, response ) { if( err ) { alert( "error get!" ); } alert(response); }); and full response: { "status" : "ok", "message" : "jvberi0xljqkjdduxdgkmy how can jvberi0xlj ? i try response.message , response["message"]. nothing works. just simple access this: var json = json.parse(response); json.message
Read more