jquery ui可拖拽+排序輔助風格

我正在使用jquery ui插件來實現鏈接到可排序列表元素的拖放操作。當我移動可拖動元素時，會使用自定義寬度和高度創建助手。當我的元素位於可排序區域上方時，會創建一個內聯樣式並影響我的自定義寬度和高度。該幫助程序不再具有正確的尺寸，並且佔可分區域寬度的100％。你可以在這裏看到一個關於jQuery UI示例的示例http://jqueryui.com/draggable/＃可排序我的目標是防止爲助手的高度和寬度插入內聯樣式。這可能嗎？jquery ui可拖拽+排序輔助風格

我嘗試了可排序的forcehelpersize參數，但沒有成功。

編輯：我注意到，當我在可排序區域時，助手會將初始元素的尺寸拖動。

來源

2013-03-05 Arnaud Ncy

我們可以嘗試一些你的代碼嗎？ – 2013-03-06 07:42:58

毫無疑問，許多人會不同意，但取決於你如何構造你的CSS（特別是它是否會導致未來開發工作的混亂），你可以確保使用！important屬性來應用寬度和高度。 – Jason 2014-11-26 15:00:28

不幸的是，設置助手寬度的ui.sortable代碼沒有按照指定考慮類的寬度。我正在使用jQuery 1.8.x，並偶然發現了這種相同的行爲。查看源代碼，我看到ui.sortable正在檢查元素上是否指定了寬度樣式，如果不是，請將其設置爲排序中第一個元素的寬度。我的解決方案是使用可拖動輔助選項的函數形式顯式設置助手的寬度和高度。

$('#draggable').draggable({ 
    helper: function() { 
     var helper = $(this).clone(); // Untested - I create my helper using other means... 
     // jquery.ui.sortable will override width of class unless we set the style explicitly. 
     helper.css({'width': '462px', 'height': '300px'}); 
     return helper; 
    } 
});

這些值不一定要硬編碼。例如，您可以從其他元素複製它們。但他們做需要設置在幫手元素本身（不繼承）。

來源

2013-04-19 17:38:15

您還可以獲取克隆元素的寬度和高度，並使用它們設置克隆本身的寬度和高度。

helper: function() { 
    var helper = $(this).clone(); // Untested - I create my helper using other means... 
    // jquery.ui.sortable will override width of class unless we set the style explicitly. 
    helper.css({'width': $(this).width(), 'height': $(this).height()}); 
    return helper; 
}

來源

2014-08-12 14:48:00 nikolasleblanc

老問題，谷歌不介意。因此這對某些人來說可能仍然有用。我用該事件的排序對象上如下：

$('#element').sortable({ 
    receive: function(event, ui) { 
     ui.helper.first().removeAttr('style'); // undo styling set by jqueryUI 
    }

來源

2014-11-03 08:59:51 roelleor

優秀的解決方案 – Splurk 2015-02-22 16:01:52

在.ready函數的頂部初始化寬度與實際寬度。如果只有一個元素的使用：

$('#myDraggable').css({ 
    'width' : $('#myDraggable').width() 
});

如果有多個元素可以遍歷使用：

$("#myDraggable > div").each(function(index) { 
    $(this).css({ 
     'width':$(this).width() 
    }); 
});

來源

2015-11-13 15:37:55 user5559444

-1

這將防止jQueryUI的的助手自定寬度：

$("#element").sortable({ 
    start: function(event, ui){ 
     ui.helper.css("width", "auto"); // or set a value if constant 
    } 
});

來源

2017-03-16 13:00:16 blairzotron

jquery ui可拖拽+排序輔助風格

回答

相關問題