Question

我正在尝试创建可拖动的对象，每个对象都有自己的属性。我是Javascript的初学者，经验很少，这是一个涉及创建一个简单的电路模拟器的项目。

到目前为止，我已经能够拖放。在一些DOM中克隆组件由一些非常有用的stackoverflow-ers提供。但是我正在努力进入下一位，这使得每个组件都具有独特的可编辑属性，例如名称，类型和坐标，所以当我再次点击该对象时，我可以拉出一些像向上菜单允许我修改该特定对象的属性。有人能提供任何关于如何去做的指示吗？

这是我到目前为止的jsfiddle - http://jsfiddle.net/3Lnqocf3/

非常感谢任何帮助！

Javascript -

jQuery(function() {
    jQuery(".component").draggable({
        //  use a helper-clone that is append to 'body' so is not 'contained' by a pane
        helper: function() {
            return jQuery(this).clone().appendTo('body').css({
                'zIndex': 5
            });
        },
        cursor: 'move',
        containment: "document"
    });

    jQuery('.ui-layout-center').droppable({
        activeClass: 'ui-state-hover',
        accept: '.component',
        drop: function(e, ui) {
            if (!ui.draggable.hasClass("dropped")) {
                var parentOffset = jQuery('.ui-layout-center').offset();
                var dropped = jQuery(ui.draggable).clone().addClass("dropped").draggable();
                dropped.css('left', (ui.position.left  - parentOffset.left) +'px');
                dropped.css('top', (ui.position.top - parentOffset.top) +'px');

                jQuery(this).append(dropped);
            }
        }
    });
});

使用单个属性创建多个可拖动的Javascript对象

0 个答案: