1

如何动态更改 Jquery UI 可拖动助手宽度并更改可放置的容差效果？

案例：当我在 jquery ui 中创建一个 helper 时可以拖动。然后将此可拖动对象放入可放置区域。在 droppable 中，over 函数必须更改此辅助宽度。所以在这个函数中改变了辅助对象的宽度，但是 容差效果 在 droppable 中不起作用。见代码：

// let the gallery items be draggable
            $( ".elementDrag", elementContainer ).draggable({
                    revert: "invalid",
                    //helper: "clone",
                     helper: function(event) {

                        DOM2 = $('<div style="border: 1px solid;"></div>');
                        DOM2.outerWidth(passObj.width + 20);
                        DOM2.outerHeight(passObj.height);

                        return DOM2;
                                                      },
                    cursor: "move",
                    start: function(event, ui) 
                     {

                     },
                    stop: function(event, ui) 
                     {

                     }
                });



pageContainer.droppable({
                accept: ".elementDrag",
                tolerance: "fit",
                greedy: true,
                drop: function( event, ui ) 
                {
                                    outerContainer.removeClass('over');
                },
                over: function(event, ui) {
                    console.log(ui);
                    console.log(ui.helper);
                    console.log($(ui.helper).outerWidth());
                    // new width set but tolerance effect is not work .... 
                    $(ui.helper).outerWidth($(ui.helper).outerWidth() - 20);

                    console.log($(ui.helper).outerWidth());

                     outerContainer.addClass('over');
                },
                out: function() {
                     outerContainer.removeClass('over');
                }
            })
4

0 回答 0