drag.rml 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <rml>
  2. <head>
  3. <title>Drag</title>
  4. <link type="text/rcss" href="../style.rcss"/>
  5. <link rel="Issue #269" href="https://github.com/mikke89/RmlUi/issues/269" />
  6. <meta name="Description" content="Clone dragging should respect parent transforms when determining starting location. However, parent transforms themselves are not applied to the clone." />
  7. <meta name="Assert" content="When the upper button is dragged, it should generate a clone at the same location and orientation." />
  8. <meta name="Assert" content="When the lower button is dragged, it should generate a clone at approximately the same location, but at another orientation and scale." />
  9. <style>
  10. body {
  11. width: 800dp;
  12. perspective: 500dp;
  13. }
  14. .container {
  15. width: 300dp;
  16. height: 300dp;
  17. position: absolute;
  18. top: 0;
  19. right: 50%;
  20. transform: translate(50%, 50dp);
  21. background-color: #C2C2C2;
  22. }
  23. .container.rotate {
  24. top: auto;
  25. bottom: 0;
  26. transform: translate(50%, -30%) rotate3d(1, 0, 1, 65deg) scale(0.8);
  27. }
  28. .item {
  29. width: 100dp;
  30. height: 100dp;
  31. margin: 100dp auto;
  32. background-color: #1F1F1F;
  33. transform: translate(100dp, 50dp) rotate(-18deg) scale(0.7);
  34. drag: clone;
  35. }
  36. .item:hover {
  37. background: #860;
  38. }
  39. .item:active {
  40. background: #973;
  41. }
  42. .item:drag {
  43. background: #f00;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <div class="container">
  49. <div class="item"></div>
  50. </div>
  51. <div class="container rotate">
  52. <div class="item"></div>
  53. </div>
  54. <handle size_target="#document"/>
  55. </body>
  56. </rml>