拖放到动态创建的 div 后，Jquery-ui 可拖动无法正常工作

Posted 2023-05-08

【中文标题】拖放到动态创建的 div 后，Jquery-ui 可拖动无法正常工作

【英文标题】：Jquery-ui draggable not working after dropping into dynamically created div

【发布时间】：2017-02-16 10:01:12

【问题描述】：

一旦将 div 拖放到可放置的绑定 div 中，我就无法拖动它。

我有多行设置为可放置，其中插入了文本框、复选框等控件。每个控件都用可拖动的 div 包裹。

第一次将列拖放到可放置的绑定 div 中时，它工作正常，然后可拖动停止。我试图在一个 div 被删除后重新初始化可拖动，但它也没有成功。

下面是我如何为每一列实现的，然后将它们附加到一个容器中进行渲染：

function buildRow()

   var formRow = $("div").attr('id', 'mainform')
                    .attr('rowIndex', rowIndex)
                    .attr('class', 'formrow ')
                    .attr('style', 'width: 100%;min-height:100px)
                    .droppable(
                        accept: "#formColumn",
                        drop: function (event, ui) 

                            $(ui.draggable).draggable('destroy').draggable(
                                containment: $('#formControlsPlaceholder'),
                                cursor: 'move'
                            );

                        
                    );

var formColumn = $('<div>')
                    .attr('id', 'formColumn')
                    .attr('style', 'width:80%;max-width:100%;')
                    .draggable(
                        containment: $('#container'),
                        cursor: 'move'
                    );
 

【参考方案1】：

实际上问题不在于可拖动。在将元素或控件拖放到新行时，我使用 attr('style') 为其中的所有元素提供相等的宽度。但我不知道设置 attr('style') 会替换所有现有样式，结果 Draggable 与 DOM 的绑定也被破坏了。

一旦我用 css('width', 'sth') 替换了 attr('style') ，它就起作用了。

:D

迪拉吉·达卡尔