Opened 6 years ago

Last modified 4 years ago

#18001 new defect

dnd/Mover fails to position auto-wrapped inline elements on first move

Reported by: bicorn Owned by:
Priority: undecided Milestone: 1.15
Component: DnD Version: 1.9.3
Keywords: Cc:
Blocked By: Blocking:

Description

When creating Moveables from inline (or inline-block) elements, the first Moveable after a line-wrap (on first move) is positioned before the line-wrap, that is after the end of previous line.

See minimal example below.

A simple fix is to set "position:absolute" AFTER obtaining margin box in Mover.js. 

        var m = domGeom.getMarginBox(this.node);
        s.position = "absolute";  // enforcing the absolute mode

However I'm not sure if this agrees with rest of code. The tests in dojo/tests/dnd/ seem to work.

Minimal example: 

<?xml version="1.1" encoding="utf-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de-DE" lang="de-DE" xmlns="http://www.w3.org/1999/xhtml">
  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    
    <style type="text/css">
      
      html,body {
        margin: 0;
        border: 0;
        padding: 0;
      }

      #dndArea, .dndItem {
        border: 1px solid black;
        padding: 10px;
        margin: 3px;
      }

      #dndArea {
        position: relative;
        width: 30em;
        height: 20ex;
        background: yellow;
        overflow: hidden;
      }

      .dndItem {
        /*display: inline-block;*/
        display: inline;
        background: red;
      }

    </style>

    <script>
      var dojoConfig = {
        baseUrl: "/dev/tests/libs/dojo/dojo",
        async: true
      };
    </script>
    
    <script 
      src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js"
      data-dojo-config="async: true">
    </script>

    <script>
      require([
        "dojox/lang/functional",
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/dnd/Moveable",
        "dojo/domReady!"
        ],function(
        df,
        dom,
        domConstruct,
        Moveable,
        domReady
      ){
        
        var poem = 
          "Wer reitet so spät durch Nacht und Stille , " +
          "es ist der Uli mit einer Mille ." ;

        var dndArea = dom.byId("dndArea");

        df.forEach( poem.split(/\s+/), function(word) {
          var div = domConstruct.create("div",{
            class: "dndItem", 
            innerHTML: word
          });
          domConstruct.place(div, dndArea,"last");
          domConstruct.place(document.createTextNode(" "), dndArea,"last");
          new Moveable(div);
        });

      });

    </script>
  
  </head>

  <body>
    <div id="dndArea"></div>
  </body>

</html>

Attachments (1)

MoverBug.html​ (2.0 KB) - added by bicorn 6 years ago.

Download all attachments as: .zip

Change History (3)

Changed 6 years ago by bicorn

Attachment: MoverBug.html​ added

comment:1 Changed 4 years ago by dylan

Milestone: tbd → 1.12

comment:2 Changed 4 years ago by dylan

Milestone: 1.13 → 1.15

Ticket planning... move current 1.13 tickets out to 1.15 to make it easier to move tickets into the 1.13 milestone.

Note: See TracTickets for help on using tickets.