Dojo可移动的动态内容

Dojo moveable for dynamic content

本文关键字：动态 可移动 Dojo      更新时间：2023-09-26

我正在使用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中吗?

我认为你使用的变量有问题。我用的是绝对值，而不是像node, type, colorborder这样的变量，你在程序中使用过的，它对我来说工作得很好。请检查这些值

还要确保" statemmachine -demo"是一个合适的id名，或者使用domConstruct。方法。

您可以在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);
        });
    });

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

//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);
相关文章：