动态更改Jquery UI可拖动辅助宽度并更改droppable中的容差效果?

时间:2012-10-02 06:53:34

标签: jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

如何在droppable中动态更改Jquery UI可拖动辅助宽度并更改容差效果?

案例:当我在jquery ui draggable中创建一个帮助器时。然后将这个可拖动的物体放入可放置的区域。在droppable中, over function必须更改此帮助程序宽度 。所以在这个函数中改变了辅助对象的宽度,但 容差效果在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');
                }
            })

0 个答案:

没有答案