Question

相当简单的问题我有一些可排序的无序列表

图像通过绝对值调整为div，而li .image_block类具有宽度/高度并且以100px浮动，所以

<ul> <li class='.image_block'><img src="pic.png"</li> <li class='.image_block'><img src="pic1.png"</li> <li class='.image_block'><img src="pic2.png"</li> <ul>

以及其他一些具有不同li高度和宽度的单独列表

所以我想要实现的是，只要我从其中一个随机宽度/高度拖动图片.image_block

目前我有这个没有用的

    $(".dragable_column").sortable({opacity: 0.8, cursor: 'move',connectWith: ['.dragable_column','.dragable_userimages'],

    receive: function(event, ui) {
        $(this).removeClass(".image_block");
 },

    start: function(event, ui) {
        $(this).addClass(".image_block");
    }

}）;

$(".dragable_userimages").sortable({opacity: 0.8,axis: 'x', cursor: 'move',connectWith: ['.dragable_column'],
    receive: function(event, ui) {
        $(this).addClass(".image_block");
 }

}）;

任何帮助都会有很大的帮助

Answer 1

.字符不应该是类名的一部分。实际上，它在班级名称中是非法的。您将CSS / jQuery选择器与元素类混淆。选择器.image_block与“具有类image_block的元素”相同，即没有.。

尝试更改代码以改为使用班级image_block。

此外，您的HTML很不稳定。除了其他任何内容，您需要关闭img代码并使用</ul>关闭列表，而不是<ul>。

Answer 2

好吧我发现这样做知道它很简单只需更改ui.helper对象的宽度和高度就这样继承人我是怎么做的

$(".dragable_column").sortable({opacity: 0.8, cursor: 'move',connectWith: ['.dragable_column','.dragable_userimages'],

    receive: function(event, ui) {
        $(ui.item).removeClass("image_block");
        var height = $(this).attr("row_height");
        $(ui.item).attr("style","height:"+height+";");


    },

    start: function(event, ui) {
    $(ui.helper).width(100).height(100);

    } 
});

$(".dragable_userimages").sortable({opacity: 0.8, cursor: 'move',connectWith: ['.dragable_column'],
    receive: function(event, ui) {
        $(ui.item).attr("style","");
        $(ui.item).addClass("image_block");
    }
});

Answer 3

我发现这个解决方案完美无缺：

$("ul.sortable").sortable({
    placeholder: "highlight",
    start: function(event, ui) {
        // Resize elements
        $(this).sortable('refreshPositions'); 
    }
});

来源：http://forum.jquery.com/topic/reducing-the-size-of-elements-before-sorting-them-using-sortable

jQuery sortable resize on remove

3 个答案: