Reorganize by Drag

[zwischenloesung]

The Adhesives should be able to hook to other adhesives by dragging them around. Some sort of "gravity" could be used..

[4www]

Feature objectives

Fig 1. an example movement allowed by this feature

Fig. 2 result operation with this feature implemented

Data to reproduce the screenshot 1st example:

{
  "stack": {
    "class": "noteit",
    "color": ["#f7ff72","#ff72e3","#6ee0ff","#ffa800","#a9a9ff","#b3ff7b"],
    "geometry": [14,14],
    "position": [2,2],
    "transform": [2,2],
    "edgeVisible": true,
    "handles": ["close","visible","new","color","edit","label","uri","photo"],
    "type": "Type"
  },
  "8bbe9aa8e08c": {
    "class": "noteit",
    "parentId": "stack",
    "color": ["#ff72e3","#6ee0ff","#ffa800","#a9a9ff","#b3ff7b","#f7ff72"],
    "geometry": [14,14],
    "position": [28,28],
    "transform": [717,370],
    "edgeVisible": true,
    "handles": ["close","visible","new","color","edit","label","uri","photo"],
    "type": "A title here",
    "title": "or something",
    "content": "and something else<br/>"
  },
  "b19b8ec980af": {
    "class": "noteit",
    "parentId": "8bbe9aa8e08c",
    "color": ["#ff72e3","#6ee0ff","#ffa800","#a9a9ff","#b3ff7b","#f7ff72"],
    "geometry": [14,14],
    "position": [28,28],
    "transform": [427,487],
    "edgeVisible": true,
    "handles": ["close","visible","new","color","edit","label","uri","photo"],
    "type": "Type",
    "title": "Title",
    "content": "...<br/>"
  },
  "e1db9bee9cfb": {
    "class": "noteit",
    "parentId": "8bbe9aa8e08c",
    "color": ["#ff72e3","#6ee0ff","#ffa800","#a9a9ff","#b3ff7b","#f7ff72"],
    "geometry": [14,14],
    "position": [28,28],
    "transform": [-15,464],
    "edgeVisible": true,
    "handles": ["close","visible","new","color","edit","label","uri","photo"],
    "type": "this is type",
    "title": "this is title",
    "content": "handmade lorem ipsum<br/>"
  },
  "809d0bfa8ca1": {
    "class": "noteit",
    "parentId": "8bbe9aa8e08c",
    "color": ["#ff72e3","#6ee0ff","#ffa800","#a9a9ff","#b3ff7b","#f7ff72"],
    "geometry": [14,14],
    "position": [28,28],
    "transform": [-398,467],
    "edgeVisible": true,
    "handles": ["close","visible","new","color","edit","label","uri","photo"],
    "type": "Type",
    "title": "Title",
    "content": "...<br/>"
  },
  "c800ebf000da": {
    "class": "uri",
    "parentId": "809d0bfa8ca1",
    "color": ["#ddddff"],
    "geometry": [20,1.2],
    "position": [35.316650390625,28],
    "transform": [62,266],
    "edgeVisible": false,
    "handles": ["close","label","edit"],
    "uri": "URI Name"
  },
  "d9be0a1e1c18": {
    "class": "instantphoto",
    "parentId": "809d0bfa8ca1",
    "color": ["#fafafa"],
    "geometry": [16,16],
    "position": [2,2],
    "transform": [1,300],
    "edgeVisible": false,
    "handles": ["close","label","edit"],
    "type": "Photo",
    "imageIndex": 1
  },
  "ad989c08ec01": {
    "class": "adhesive",
    "parentId": "8bbe9aa8e08c",
    "color": ["#ff6666","#00ff00","#7788ff"],
    "geometry": [8,1],
    "position": [28,28],
    "transform": [106,-40],
    "edgeVisible": false,
    "handles": ["close","color","edit"],
    "type": "Label"
  },
  "adf11c98afe0": {
    "class": "adhesive",
    "parentId": "809d0bfa8ca1",
    "color": ["#ff6666","#00ff00","#7788ff"],
    "geometry": [8,1],
    "position": [35.316650390625,28],
    "transform": [-84,-34],
    "edgeVisible": false,
    "handles": ["close","color","edit"],
    "type": "Label"
  },
  "8d9dcd8800bd": {
    "class": "noteit",
    "parentId": "stack",
    "color": ["#b3ff7b","#f7ff72","#ff72e3","#6ee0ff","#ffa800","#a9a9ff"],
    "geometry": [14,14],
    "position": [28,28],
    "transform": [-608,532],
    "edgeVisible": true,
    "handles": ["close","visible","new","color","edit","label","uri","photo"],
    "type": "Type",
    "title": "Title",
    "content": "...<br/>"
  },
  "9bc8019f9eec": {
    "class": "noteit",
    "parentId": "8d9dcd8800bd",
    "color": ["#ff72e3","#6ee0ff","#ffa800","#a9a9ff","#b3ff7b","#f7ff72"],
    "geometry": [14,14],
    "position": [28,28],
    "transform": [79,386],
    "edgeVisible": true,
    "handles": ["close","visible","new","color","edit","label","uri","photo"],
    "type": "Type",
    "title": "Title",
    "content": "...<br/>"
  }
}

[4www]

Fig 3. a possible ux.i to reorganize parent/child relations by drag

This solution (should be improved) has the advantage to work on touch and mouse devices (keyboard accessibility should be possible, but we still need to define a way of doing this, separate issue), as dragging is only possible with a mouse.

In case we use this solution, the current & that is the button for creating a new child adhesive, could be removed, and instead use the new button located at the bottom of the adhesives.

An edge, connecting two adhesives, is for now always from the bottom of an adhesive A (the parent) to the top of an adhesive B (the children).
We can take advantage of these positions, by adding these symbolic "handles" to show the user where it is possible to create a new adhesive, or change the adhesive relationship (Fig.1.2).