javascript - Dojo 可移动以提供动态内容

Question

我正在使用 dojo domConstruct 创建动态 html 元素，如下所示，

//ID, all style parameters are available in function 
var vertex = domConstruct.create("div", {
  id: node.ID,
  "class": type,
  style: {
    left: node.position.x +'px',
    top: node.position.y +'px',
    border: colorBorder.border,
    'box-shadow': colorBorder.boxShadow,
    backgroundColor: colorBorder.backgroundColor,
    position:'absolute'
  },
  innerHTML: nodeName
}, "statemachine-demo");

我必须使这个元素可移动，因此我使用 dojo Moveable 如下，

//using dojo Moveable    
var moveableHandle = new Moveable(vertex);
console.log("priting moveable object before passing to adapter",moveableObject); 

当我运行它时，日志显示以下几行，

priting moveable object before passing to adapter 
Object
  delay: 0
  events: null
  handle: null
  mover: function (){
  node: null
  onMove: function (){
  onMoveStart: function (){
  onMoveStop: function (){
  skip: undefined
  __proto__: Object

我不明白，为什么句柄和节点仍然为空？理想情况下应该引用可移动元素。

是因为应用Moveable时，Dom中不存在元素吗？

Answer 1

我认为您使用的变量有问题。我使用绝对值而不是你在程序中使用的节点、类型、颜色边框等变量，它对我来说效果很好。请检查这些值。

还要确保“statemachine-demo”是正确的 ID 名称，或使用 domConstruct.place 方法。

您可以检查示例的工作版本 - here in jsfiddle .

   require(["dojo/dnd/Moveable", "dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/domReady!"],

    function(Moveable, dom, on, domConstruct) {
        on(dom.byId("doIt"), "click", function() {
            var vertex = domConstruct.create("div", {
                id: 'id1',
                class: "class1",
                style: {
                    left: 200 + 'px',
                    top: 200 + 'px',
                    border: '1px',
                    'box-shadow': '10px 10px 5px #888888',
                    backgroundColor: 'green',
                    position: 'absolute'
                },
                innerHTML: 'aaaaaaaaaaa'
            }, "dndArea");
            var dnd1 = new Moveable(vertex);
            console.log(dnd1);
        });
    });