Question

我有一个旋转木马篮需要处理多个选择器才能进入它。有需要接受的youtube视频（选择器：“。youtubevideo”），需要加载的雅虎视频（选择器：“。yahoovideo”）。这是我将在稍后使代码更有用的代码。

这些项目很容易拖动，但旋转木马不会接受两个不同的选择器，分别是“.yahoovideo”和“.youtubevideo”，为什么会这样？

拖动

var count = 0;
var imageParams = '';
var idParams = '';
var pageType = '';
var titleParams = '';
$(".youtubevideo").multidraggable({
    'helper': 'clone',
    'revert': 'invalid',
    'cursorAt': { left: 0, top: 0 },
    'zIndex': 500,
    'distance': 10,
    start: function(event, ui) {

        count += 1;

        $(ui.helper).children().each(function() {
            $(this).remove();
        });


        $(ui.helper).css("width", "0%");
        $(ui.helper).css("paddingTop", "0px");
        $(ui.helper).css("paddingBottom", "0px");
        $(ui.helper).css("paddingLeft", "0px");
        $(ui.helper).css("paddingRight", "0px");

        if (GetViewSelected() == 'details') {

            var img = $(this).find(".divmediaresultsnavigationcontrolvideotitletext3hidden");

            imageParams += $($(img)[1]).text() + '~';
            var id = $(this).attr("id");
            id = id.split("limediaresultsnavigationcontroldetailscontainer")[1];
            idParams += id + '~';

            var title = $($($($(this).children()[0]).children()[0]).children()[2]).text();
            titleParams += title + '~';

            var className = $(this).attr("class");
            className = className.split(" ")[2];
            pageType = className;

        }
        else {

            //var img = $("a.linkmediaresultsnavigationcontrolcontainer").find('img');


            var img = $($($(this).children()[0]).children()[0]).children()[0];

            imageParams += $(img).attr("src") + '~';
            var id = $(this).attr("id");
            id = id.split("linkmediaresultsnavigationcontrolcontainer")[1];
            idParams += id + '~';

            var title = $($(this).children()[2]).text();
            titleParams += title + '~';

            var className = $(this).attr("class");
            className = className.split(" ")[2];
            pageType = className;
        }

        var countItems = $(".ui-multidraggable").size();

        if (count == (countItems / 2)) {

            var divContainer = $("<div/>")
            $(ui.helper).append(divContainer);
            $(divContainer).attr("id", "divContainerMultiDraggable");
            $(divContainer).css("paddingTop", "10px");
            $(divContainer).css("paddingBottom", "10px");
            $(divContainer).css("paddingLeft", "10px");
            $(divContainer).css("paddingRight", "10px");
            $(divContainer).css("backgroundColor", "black");
            $(divContainer).css("display", "inline-block");
            $(divContainer).text((countItems / 2) + " Items Selected");

            var divHiddenImageParams = $("<div/>");
            $(divContainer).append(divHiddenImageParams);
            $(divHiddenImageParams).css("display", "none");
            $(divHiddenImageParams).text(imageParams);

            var divHiddenIDParams = $("<div/>");
            $(divContainer).append(divHiddenIDParams);
            $(divHiddenIDParams).css("display", "none");
            $(divHiddenIDParams).text(idParams);

            var divHiddenPageType = $("<div/>");
            $(divContainer).append(divHiddenPageType);
            $(divHiddenPageType).css("display", "none");
            $(divHiddenPageType).text(pageType);

            var divHiddenTitle = $("<div/>");
            $(divContainer).append(divHiddenTitle);
            $(divHiddenTitle).css("display", "none");
            $(divHiddenTitle).text(titleParams);
        }
    },
    stop: function(event, ui) {

        count = 0;
        imageParams = '';
        idParams = '';

        $("#divContainerMultiDraggable").remove();

    }

});


var count2 = 0;
var imageParams2 = '';
var idParams2 = '';
$(".yahoovideo").multidraggable({
    'helper': 'clone',
    'revert': 'invalid',
    'cursorAt': { left: 0, top: 0 },
    'zIndex': 500,
    start: function(event, ui) {

        count2 += 1;

        $(ui.helper).children().each(function() {
            $(this).remove();
        });

        $(ui.helper).css("width", "0%");
        $(ui.helper).css("paddingTop", "0px");
        $(ui.helper).css("paddingBottom", "0px");
        $(ui.helper).css("paddingLeft", "0px");
        $(ui.helper).css("paddingRight", "0px");

        if (GetViewSelected() == 'details') {

            var img = $(this).find(".divmediaresultsnavigationcontrolvideotitletext3hidden");

            imageParams2 += $($(img)[1]).text() + '~';
            var id = $(this).attr("id");
            id = id.split("limediaresultsnavigationcontroldetailscontainer")[1];
            idParams2 += id + '~';

            var className = $(this).attr("class");
            className = className.split(" ")[2];
            pageType = className;

        }
        else {

            var img = $("a.linkmediaresultsnavigationcontrolcontainer").find('img');
            imageParams2 += $(img).attr("src") + '~';
            var id = $(this).attr("id");
            id = id.split("linkmediaresultsnavigationcontrolcontainer")[1];
            idParams2 += id + '~';

            var className = $(this).attr("class");
            className = className.split(" ")[2];
            pageType = className;

        }

        var countItems = $(".ui-multidraggable").size();

        if (count2 == (countItems / 2)) {

            var divContainer = $("<div/>")
            $(ui.helper).append(divContainer);
            $(divContainer).attr("id", "divContainerMultiDraggable");
            $(divContainer).css("paddingTop", "10px");
            $(divContainer).css("paddingBottom", "10px");
            $(divContainer).css("paddingLeft", "10px");
            $(divContainer).css("paddingRight", "10px");
            $(divContainer).css("backgroundColor", "black");
            $(divContainer).css("display", "inline-block");
            $(divContainer).text((countItems / 2) + " Items Selected");

            var divHiddenImageParams = $("<div/>");
            $(divContainer).append(divHiddenImageParams);
            $(divHiddenImageParams).css("display", "none");
            $(divHiddenImageParams).text(imageParams2);

            var divHiddenIDParams = $("<div/>");
            $(divContainer).append(divHiddenIDParams);
            $(divHiddenIDParams).css("display", "none");
            $(divHiddenIDParams).text(idParams2);

            var divHiddenPageType = $("<div/>");
            $(divContainer).append(divHiddenPageType);
            $(divHiddenPageType).css("display", "none");
            $(divHiddenPageType).text(pageType);
        }
    },
    stop: function(event, ui) {

        count2 = 0;
        imageParams2 = '';
        idParams2 = '';

    }

});

可投放

var countDrop = 0;
var items = 0;
$(".carouselBody").droppable({
    accept: '.youtubevideo',
    drop: function(event, ui) {

        countDrop += 1;

        if (countDrop == 1) {
            items = $(".ui-multidraggable").size();

            var div = $("#divContainerMultiDraggable");
            var divImageParams = $($(div).children()[0]).text();
            var divIDParams = $($(div).children()[1]).text();
            var divTitleParams = $($(div).children()[3]).text();
            var divPageType = $($(div).children()[2]).text();


            $("div.divContainerMultiDraggable").remove();

            var ul = $(".carouselBody").find("ul");

            for (var i = 0; i < divImageParams.split("~").length; i++) {

                var image = divImageParams.split("~")[i];
                var id = divIDParams.split("~")[i];
                var title = divTitleParams.split("~")[i];

                if (image != "") {

                    if ($("#listmediabasketitemcontainer" + id).length > 0) {
                    }
                    else {
                        var li = $("<li/>");
                        $(ul).append(li);
                        $(li).attr("class", "listmediabasketitemcontainer");
                        $(li).attr("id", "listmediabasketitemcontainer" + id);
                        $(li).attr("title", title);

                        $(li).click(function() {

                            var tempClass = $(this).attr("class");
                            tempClass = tempClass.split(" ")[0];

                            if (selectedMultiDragContainer == "") {
                            }
                            else {

                                if (selectedMultiDragContainer == tempClass) {
                                }
                                else {
                                    $(".ui-multidraggable").removeClass("ui-multidraggable");
                                    $($(this).children()[0]).addClass("ui-multidraggable");
                                }

                            }

                            selectedMultiDragContainer = tempClass;


                        });


                        var div = $("<div/>");
                        $(li).append(div);
                        $(div).attr("class", "divmediabasketitemcontainer");


                        var divHiddenID = $("<div/>");
                        $(li).append(divHiddenID);
                        $(divHiddenID).css("display", "none");
                        $(divHiddenID).text(id);

                        var divHiddenPageType = $("<div/>");
                        $(li).append(divHiddenPageType);
                        $(divHiddenPageType).css("display", "none");
                        $(divHiddenPageType).text(divPageType);

                        var img = $("<img/>");
                        $(div).append(img);
                        $(img).attr("width", "100px");
                        $(img).attr("height", "100px");
                        $(img).attr("src", image);
                    }

                }

            }
            imageParams = '';
            idParams = '';
            $(".ui-multidraggable").removeClass("ui-multidraggable");
            DragDropMediaToPLaylistSelected();
        }
    },
    over: function(event, ui) {

        countDrop = 0;

    }

});


var countDrop4 = 0;
var items4 = 0;
$(".carouselBody").droppable({
    accept: '.yahoovideo',
    drop: function(event, ui) {

        countDrop4 += 1;

        if (countDrop4 == 1) {
            items4 = $(".ui-multidraggable").size();

            var div = $("#divContainerMultiDraggable");
            var divImageParams = $($(div).children()[0]).text();
            var divIDParams = $($(div).children()[1]).text();
            var divTitleParams = $($(div).children()[3]).text();
            var divPageType = $($(div).children()[2]).text();


            $("div.divContainerMultiDraggable").remove();

            var ul = $(".carouselBody").find("ul");

            for (var i = 0; i < divImageParams.split("~").length; i++) {

                var image = divImageParams.split("~")[i];
                var id = divIDParams.split("~")[i];
                var title = divTitleParams.split("~")[i];

                if (image != "") {

                    if ($("#listmediabasketitemcontainer" + id).length > 0) {
                    }
                    else {
                        var li = $("<li/>");
                        $(ul).append(li);
                        $(li).attr("class", "listmediabasketitemcontainer");
                        $(li).attr("id", "listmediabasketitemcontainer" + id);
                        $(li).attr("title", title);

                        $(li).click(function() {

                            var tempClass = $(this).attr("class");
                            tempClass = tempClass.split(" ")[0];

                            if (selectedMultiDragContainer == "") {
                            }
                            else {

                                if (selectedMultiDragContainer == tempClass) {
                                }
                                else {
                                    $(".ui-multidraggable").removeClass("ui-multidraggable");
                                    $($(this).children()[0]).addClass("ui-multidraggable");
                                }

                            }

                            selectedMultiDragContainer = tempClass;


                        });


                        var div = $("<div/>");
                        $(li).append(div);
                        $(div).attr("class", "divmediabasketitemcontainer");


                        var divHiddenID = $("<div/>");
                        $(li).append(divHiddenID);
                        $(divHiddenID).css("display", "none");
                        $(divHiddenID).text(id);

                        var divHiddenPageType = $("<div/>");
                        $(li).append(divHiddenPageType);
                        $(divHiddenPageType).css("display", "none");
                        $(divHiddenPageType).text(divPageType);

                        var img = $("<img/>");
                        $(div).append(img);
                        $(img).attr("width", "100px");
                        $(img).attr("height", "100px");
                        $(img).attr("src", image);
                    }

                }

            }
            imageParams = '';
            idParams = '';
            $(".ui-multidraggable").removeClass("ui-multidraggable");
            DragDropMediaToPLaylistSelected();
        }
    },
    over: function(event, ui) {

        countDrop4 = 0;

    }

});

Answer 1

使用,支持多个选择器。那么，相关部分将是：

accept: '.youtubevideo,.yahoovideo'

适用于CSS和jQuery。

文档：jQuery API: Multiple Selector (“selector1, selector2, selectorN”)

Answer 2

两者是否有相同的回调（start等等）？如果是这样，只需向两者添加一个公共类，并将其用于accept，如

accept: '.video'

另一个选项是将accept转换为函数，并根据您的条件返回true：

accept: function(element) {
  var cn = element.className;

  return cn == 'youtubevideo' || 'yahoovideo'
}

使用JQuery Droppables时有多个选择器

拖动

可投放

2 个答案: