Fatal编程技术网
  • javascript/
  • Javascript 用于比较和保存项目的jQuery多列表解决方案

Javascript 用于比较和保存项目的jQuery多列表解决方案

javascript jquery html css

Javascript 用于比较和保存项目的jQuery多列表解决方案,javascript,jquery,html,css,drag-and-drop,Javascript,Jquery,Html,Css,Drag And Drop,我正在制作一个工具，可以比较和列出项目。我想给它们设置动画，让它们看起来很酷。请帮助我解决实施中的一些问题。有很多问题，所以我把每一个问题都单独列了出来 问题1 mouseout事件绑定 有时，如果我拾取一个项目并将其拉到list1-list2-list1，覆盖面板将关闭 问题2单击事件绑定 如果我将一个元素推到列表1，将其放到列表中，然后单击另一个列表，列表将更接近。单击返回列表1时，它将设置3次动画，而不是一次 第3期占位符 如何将占位符拖放到列表中，如何更好地重新排列并更容易理解交叉拖放（

我正在制作一个工具，可以比较和列出项目。我想给它们设置动画，让它们看起来很酷。请帮助我解决实施中的一些问题。有很多问题，所以我把每一个问题都单独列了出来

问题1 mouseout事件绑定 有时，如果我拾取一个项目并将其拉到list1-list2-list1，覆盖面板将关闭

问题2单击事件绑定 如果我将一个元素推到列表1，将其放到列表中，然后单击另一个列表，列表将更接近。单击返回列表1时，它将设置3次动画，而不是一次

第3期占位符 如何将占位符拖放到列表中，如何更好地重新排列并更容易理解交叉拖放（对于列表到列表的拖放和项目到列表的拖放）

问题4动画平滑度 如何使动画变得更平滑？你觉得这个怎么样

问题5优化 你认为，如果我对代码进行一点优化，在浏览器中会更快吗？你能给我一些建议吗

问题6其他想法 如果你对它有一些一般性的想法，我也欢迎他们。 下载它，想用就用吧，我正在为我女朋友的网站制作

-jsFiddle，或：

HTML

JS

函数overlayFadeIn（）{
$（“#覆盖”）.fadeIn（）；
}
函数overlayFadeOut（）{
//警惕（“褪色”）；
推回（）；
$（“#覆盖”）.fadeOut（）；
$（“#overlycontainer”）.unbind（“mouseleave”）；
}
函数退出（）{
$（this.parent（）.remove（）；
}
函数pushBack（）{
$（“#overlycontainer”）.unbind（“mouseleave”）；
$（“#梦想列表”）.parent（）.animate({
宽度：“500px”，
不透明度：“0.9”，
右：“0”，
顶部：“0”，
高度：“500px”
}, 100);
$（“#比较”）.parent（）.animate({
宽度：“290px”，
不透明度：“0.9”，
左：“0”，
顶部：“0”，
高度：“500px”
}, 100);
$（“#overlaycontainer”）.bind（“mouseleave”，overlayFadeOut）；
}
函数pushBitCloser（哪个）{
var哪个=哪个；
var其他；
if（which.attr（“id”）=“dreamlist”）{
其他=$（“#比较”）；//平衡-左
whleft=“+=15px”；
otleft=“+=0px”；
whright=“+=0px”；
otright=“+=50px”；
}
否则{
other=$（“#梦想列表”）；//对
whleft=“+=0px”；
otleft=“-=10px”；
whright=“+=0px”；
otright=“+=0px”；
}
if（which.attr（“id”）=“dreamlist”）{
$（“#梦想列表”）.parent（）.animate({
宽度：“530px”，
不透明度：“1”，
高度：“550px”，
顶部：“-25px”，
右：“-15px”
}, {
持续时间：200，
特别租赁：{
宽度：'线性'，
不透明度：“线性”
}
});
$（“#比较”）.parent（）.animate({
宽度：“270px”，
不透明度：“0.7”，
左：“+10px”，
顶部：“+10px”，
高度：“480px”
}, {
持续时间：200，
特别租赁：{
宽度：'线性'，
高度：'线性'，
顶部：'线性'，
不透明度：“线性”
}
});
}
否则{
$（“#比较”）.parent（）.animate({
宽度：“320px”，
不透明度：“1”，
左：“+10px”，
顶部：“-15px”，
高度：“530px”
}, {
持续时间：200，
特别租赁：{
宽度：'线性'，
高度：'线性'，
顶部：'线性'，
不透明度：“线性”
}
});
$（“#梦想列表”）.parent（）.animate({
宽度：“470px”，
不透明度：“0.7”，
高度：“480px”，
顶部：“+10px”，
右：“-15px”
}, {
持续时间：200，
特别租赁：{
宽度：'线性'，
不透明度：“线性”
}
});
}
}
功能推送闭合器（其中，pb）{
如果（pb==真）{
推回（）；
}
var哪个=哪个；
var其他；
if（which.attr（“id”）=“dreamlist”）{
其他=$（“#比较”）；
}
否则{
其他=$（“#梦想列表”）；
}
哪个是.parent（）.css({
“z指数”：“20”
});
other.parent（）.css({
“z指数”：“10”
});
if（which.attr（“id”）=“dreamlist”）{
$（“#梦想列表”）.parent（）.animate({
宽度：“550px”，
不透明度：“1”，
高度：“550px”，
顶部：“-25px”，
右：“-15px”
}, {
持续时间：200，
特别租赁：{
宽度：'线性'，
不透明度：“线性”
}
});
$（“#比较”）.parent（）.animate({
宽度：“270px”，
不透明度：“0.7”，
左：“+10px”，
顶部：“+10px”，
高度：“480px”
}, {
持续时间：200，
特别租赁：{
宽度：'线性'，
高度：'线性'，
顶部：'线性'，
不透明度：“线性”
}
});
}
否则{
$（“#比较”）.parent（）.animate({
宽度：“320px”，
不透明度：“1”，
左：“+15px”，
顶部：“-15px”，
高度：“530px”
}, {
持续时间：200，
特别租赁：{
宽度：'线性'，
高度：'线性'，
顶部：'线性'，
不透明度：“线性”
}
});
$（“#梦想列表”）.parent（）.animate({
宽度：“490px”，
不透明度：“0.7”，
高度：“480px”，
顶部：“+10px”，
右：“-10px”
}, {
持续时间：200，
特别租赁：{
宽度：'线性'，
不透明度：“线性”
}
});
}
}
美元（“.li”）.draggable({
助手：“克隆”

<div id="overlay" class="clearfix">
    <div id="overlaycontainer">
        <div id="comparecontainer" class="overlaycontainer">
            <div class="icon"></div>
            <ul id="compare">
                <li class="fixed">LIST1</li>        
            </ul>
            <div class="shadow"></div>
            
        </div>
        <div id="dreamlistcontainer" class="overlaycontainer">
            <div class="icon"></div>
            <ul id="dreamlist">
                <li class="fixed">LIST2</li>
            </ul>
            <div class="shadow"></div>
        </div>
    </div>
</div>

<hr />

<ul class="offers clearfix">
    <li name="deal1">ITEM #1</li>
    <li name="deal2">ITEM #2</li>
    <li name="deal3">ITEM #3</li>
</ul>



body {background-color: white; padding: 50px 0 0; margin: 0;}
ul {list-style-type: none;}
#overlay {background: black url(img/dreamlist_bg.gif) center center no-repeat; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
#overlaycontainer {width: 800px; height: 600px; position: relative; margin: auto; top: 50%; margin-top: -300px;}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.overlaycontainer { height:500px; float: left;
    box-shadow: 0 0 5px black;
    -moz-box-shadow: 0 0 5px black;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
}
.overlaycontainer.active {
    box-shadow: 0 0 10px #1cb9ee, 0 0 30px #1a86ce, 0 0 3px white;
    -moz-box-shadow: 0 0 10px #1cb9ee, 0 0 30px #1a86ce, 0 0 3px white;
}
#compare {padding: 20px; background-color: yellow;}
#dreamlist {padding: 20px; background-color: white;}        
#comparecontainer {position: absolute; top: 0; left: 0; width: 290px; opacity: 0.9;}
#dreamlistcontainer {position: absolute; top: 0; right: 0; width: 500px; opacity: 0.9;}
li {padding: 10px;}
.drop {width: 10px; height:10px; background-color: red; display: inline-block;}    
.offers {padding: 10px;}
.offers li {width: 194px; height: 300px; overflow: hidden;float: left; margin-right: 5px;}
.fixed {text-transform: uppercase; font-family: "Gill Sans"; color: #1a86ce; font-size: 28px; text-align: center; text-shadow: 0px 1px 0px white;}
.shadow {
    position: absolute;
    bottom: -11px;
    display: block;
    background: transparent url(img/imagesforem.png) no-repeat;
    height: 50px;
    width: 50px;
    margin: 0 auto;
}
.icon {
    position: absolute;
    bottom: 10px;
    display: block;
    background: transparent url(img/imagesforic.png) no-repeat;
    height: 50px;
    width: 50px;
    margin: 0 auto;
}
#comparecontainer .icon {background-position: bottom left; left: 41%;}
#dreamlistcontainer .icon {background-position: bottom right; right: 50%}



function overlayFadeIn() {
    $("#overlay").fadeIn();
}

function overlayFadeOut() {
    //    alert("faded.");
    pushBack();
    $("#overlay").fadeOut();
    $("#overlaycontainer").unbind("mouseleave");
}

function dropOut() {
    $(this).parent().remove();
}

function pushBack() {
    $("#overlaycontainer").unbind("mouseleave");
    $("#dreamlist").parent().animate({
        width: "500px",
        opacity: "0.9",
        right: "0",
        top: "0",
        height: "500px"
    }, 100);
    $("#compare").parent().animate({
        width: "290px",
        opacity: "0.9",
        left: "0",
        top: "0",
        height: "500px"
    }, 100);
    $("#overlaycontainer").bind("mouseleave", overlayFadeOut);
}

function pushBitCloser(which) {
    var which = which;
    var other;
    if (which.attr("id") == "dreamlist") {
        other = $("#compare"); //bal - left
        whleft = "+=15px";
        otleft = "+=0px";
        whright = "+=0px";
        otright = "+=50px";
    }
    else {
        other = $("#dreamlist"); // right
        whleft = "+=0px";
        otleft = "-=10px";
        whright = "+=0px";
        otright = "+=0px";
    }


    if (which.attr("id") == "dreamlist") {
        $("#dreamlist").parent().animate({
            width: "530px",
            opacity: "1",
            height: "550px",
            top: "-25px",
            right: "-15px"
        }, {
            duration: 200,
            specialEasing: {
                width: 'linear',
                opacity: 'linear'
            }
        });
        $("#compare").parent().animate({
            width: "270px",
            opacity: "0.7",
            left: "+10px",
            top: "+10px",
            height: "480px"
        }, {
            duration: 200,
            specialEasing: {
                width: 'linear',
                height: 'linear',
                top: 'linear',
                opacity: 'linear'
            }
        });
    }
    else {
        $("#compare").parent().animate({
            width: "320px",
            opacity: "1",
            left: "+10px",
            top: "-15px",
            height: "530px"
        }, {
            duration: 200,
            specialEasing: {
                width: 'linear',
                height: 'linear',
                top: 'linear',
                opacity: 'linear'
            }
        });
        $("#dreamlist").parent().animate({
            width: "470px",
            opacity: "0.7",
            height: "480px",
            top: "+10px",
            right: "-15px"
        }, {
            duration: 200,
            specialEasing: {
                width: 'linear',
                opacity: 'linear'
            }
        });

    }
}

function pushCloser(which, pb) {
    if (pb == true) {
        pushBack();
    }

    var which = which;
    var other;
    if (which.attr("id") == "dreamlist") {
        other = $("#compare");
    }
    else {
        other = $("#dreamlist");
    }

    which.parent().css({
        "z-index": "20"
    });
    other.parent().css({
        "z-index": "10"
    });



    if (which.attr("id") == "dreamlist") {
        $("#dreamlist").parent().animate({
            width: "550px",
            opacity: "1",
            height: "550px",
            top: "-25px",
            right: "-15px"
        }, {
            duration: 200,
            specialEasing: {
                width: 'linear',
                opacity: 'linear'
            }
        });
        $("#compare").parent().animate({
            width: "270px",
            opacity: "0.7",
            left: "+10px",
            top: "+10px",
            height: "480px"
        }, {
            duration: 200,
            specialEasing: {
                width: 'linear',
                height: 'linear',
                top: 'linear',
                opacity: 'linear'
            }
        });
    }
    else {
        $("#compare").parent().animate({
            width: "320px",
            opacity: "1",
            left: "+15px",
            top: "-15px",
            height: "530px"
        }, {
            duration: 200,
            specialEasing: {
                width: 'linear',
                height: 'linear',
                top: 'linear',
                opacity: 'linear'
            }
        });
        $("#dreamlist").parent().animate({
            width: "490px",
            opacity: "0.7",
            height: "480px",
            top: "+10px",
            right: "-10px"
        }, {
            duration: 200,
            specialEasing: {
                width: 'linear',
                opacity: 'linear'
            }
        });

    }
}

$(".offers li").draggable({
    helper: "clone",
    revert: "invalid",
    cursor: "move",
    zIndex: 30,
    start: function(event, ui) {
        overlayFadeIn();
    },
    stop: function(event, ui) {
        $("#overlaycontainer").bind("mouseleave", overlayFadeOut);
    }
});

$("#compare").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.incompare)",
    greedy: true,
    tolerance: 'pointer',
    over: function(event, ui) {
        $(this).parent().addClass("active");
        pushBitCloser($(this));
    },
    out: function(event, ui) {
        $(this).parent().removeClass("active");
        pushBack($(this));

    },
    drop: function(event, ui) {
        $(this).parent().removeClass("active");
        $("#overlaycontainer").bind("mouseleave", overlayFadeOut);

        pushCloser($(this), false);
        var element_id = ui.draggable.attr("name");
        var gotit = $("#compare li[name='" + element_id + "']").size();
        if (gotit != 1) {
            var drop = $('<span></span>').addClass("drop").bind("click", dropOut);
            $('<li class="incompare"></li>').attr("name", element_id).text(ui.draggable.text()).append(drop).appendTo(this);
        }
        $(this).find(".placeholder").remove();
        $("#dreamlist").parent().click(function() {
            pushCloser($("#dreamlist"), true)
        });
    }
}).sortable({
    helper: "clone",
    items: "li:not(.placeholder):not(.fixed)",
    start: function() {
        $("#overlaycontainer").unbind("mouseleave");
    },
    stop: function() {
        $("#overlaycontainer").bind("mouseleave", overlayFadeOut);
    },
    sort: function() {
        $(this).removeClass("ui-state-default");
    }
});

$("#dreamlist").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.indreamlist)",
    greedy: true,
    tolerance: 'pointer',
    over: function(event, ui) {
        $(this).parent().addClass("active");
        pushBitCloser($(this));
    },
    out: function(event, ui) {
        $(this).parent().removeClass("active");
        pushBack($(this));

    },
    drop: function(event, ui) {
        $(this).parent().removeClass("active");
        $("#overlaycontainer").bind("mouseleave", overlayFadeOut);
        pushCloser($(this), false);
        var element_id = ui.draggable.attr("name");
        var gotit = $("#dreamlist li[name='" + element_id + "']").size();
        if (gotit != 1) {
            var drop = $('<span></span>').addClass("drop").bind("click", dropOut);
            $('<li class="indreamlist"></li>').attr("name", element_id).text(ui.draggable.text()).append(drop).appendTo(this);
        }
        $(this).find(".placeholder").remove();
        $("#compare").parent().click(function() {
            pushCloser($("#compare"), true)
        });
    }
}).sortable({
    helper: "clone",
    items: "li:not(.placeholder):not(.fixed)",
    start: function() {
        $("#overlaycontainer").unbind("mouseleave");
    },
    stop: function() {
        $("#overlaycontainer").bind("mouseleave", overlayFadeOut);
    },
    sort: function() {
        $(this).removeClass("ui-state-default");
    }
});