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

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

同时确保＆＃34; statemachine-demo＆＃34;是一个正确的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);
        });
    });

Answer 2

我使用setTimeout解决了这个问题，它延迟了Moveable对象的创建，

//using lang.hitch for passing the context
setTimeout(lang.hitch(this,new function(){

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

 //do stuff with moveable .....

}),1000);

Dojo可移动动态内容

2 个答案: