Develop Reference

Create responsive drag and drop dashboard in React

I am trying to create a dashboard where users can drag and drop widgets within the dashboard to any position they'd like. I've seen other examples similar but they all seem to have predefined elements.
In my case, the user can create and remove elements on the dashboard and move them to any point on the board.
My question is, what would be the best way to create a dashboard like this that supports the dragging and dropping of an element anywhere on it. Also, how can I save this info?
Thanks in advance.

Are you looking for something like react-grid-layout?
In this demo you can see how the widgets' state could be encoded. This could be saved and retrieved upon page load.

You can use react-dnd library. Easy to implement and customise. Here is the repo link;
https://github.com/react-dnd/react-dnd/

RadListView: animate template selection change

I am new to NativeScript and Javascript development in general. My background is Android.
Background:
As a test I try to replicate one of my old apps with NativeScript and have encountered a problem:
I use a RadListView with multiple templates. The correct template is chosen at runtime. The templateSelector uses a boolean variable to determine the correct one. (Imagine tapping a ListView item. When you do it expands and shows 2 buttons. You tap it again -> the buttons disappear.)
Now that works just fine.
Problem
My problem is that I cannot figure out how to animate the template switch. The new content just appears/disappear instantanously.
What I managed so far
I managed to animate the buttons when their template has just been chosen. I set their opacity to 0 and animated it to 1. Problem is: The necessery height for the buttons is reserved as soon as the template is chosen.
Question
Is this at all possible? If so how?
Sources
Expandable ListView items by manojdcoder:
https://discourse.nativescript.org/t/expand-element-radlistview/4268/3

There are few built-in animations you could find in the docs and working examples in Github.

Drag Drop Problems of react-dnd library - nested drop target

Recently, the project Im using is lib react-dnd. Im in trouble w the bug so plz help me.
BUG: Drop both top n bottom of component.
Describe: In base I have 5 dragsources, 2 droptargets. when base have no component, component will render together with 2 droptargest on top n bottom.
=> when users use hover to 2 droptargets up and bottom, drop will be in that situation.
A kind of tree view
TROUBLE; Hover can not detech child droptargets below ( target base still on top), so I can not drop it
To make it clearer, checking attached photos
Thank you so much for taking your time and consideration.
Please let me know If i go wrong in rules of how to post question on StackOverFlow.
enter image description here

How to create Sortable, drag and drop multi-level list in Javascript

I'm trying to create a multi-leveled list that is sortable by drag and drop. The user can grab an element and move it up and down the tree or drop it into other elements and have it become a child.
Are there off the shelf JS solutions? The jQuery sortable/draggable worked fine for a single level list but less so on nested solutions.

You can also try https://github.com/dbushell/Nestable (demo: http://dbushell.github.io/Nestable/).
Works with mouse and touch and this plugin is compatible with jQuery and Zepto.

I am using johnny's jquery-sortable plugin, which can be found here http://johnny.github.io/jquery-sortable.
It seems to work pretty well.
I was also trying to get it to send back the sorted structure of the list via AJAX. See this topic if you want to see my working solution, as the official documentation on serialization seemed slightly unsatisfactory (at least for nested lists).
Hope this is helpful.

So while you can use https://github.com/dbushell/Nestable or http://johnny.github.io/jquery-sortable
You probably want to move to something like React these days so you can use packages like this: https://www.npmjs.com/package/react-drag-sortable
Try not to use jQuery for this sort of thing any more. By the time you have drag/drop interfaces you have the makings of a webapp, not a web page, and you're going the wrong direction.

I have came to see a package named react-nestable and it works to create nested drag and drop. I am putting a link for that package below - react-nestable npm

How to select an Metro listview item with mouse without invoking it?

This question is about Windows 8 Metro UI's listview.
In listview with selectionMode set to single, you can drag an item down (in a gridLayout) or to the right(in a listLayout) a little bit and release to select the item.
However, how do I select an listview item with mouse without invoking it? I tried right click, which triggers a app bar in my application, but in the start screen, a right click on a tile will trigger a selection. How do I make that happen in my application?

Answering my own question as I just get a response from Microsoft.
http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/45859830-c12f-4d14-9090-41403e1ddae3
You can use Ctrl+left-click to select an item.
If you are finding the selection behavior differ from the start menu, the reply also says that is a known issue and may be changed in the future release.