CODEWITHSUNDEEP
javascriptjquery
redoc01
redoc01

Reputation: 2327

multiple selectors when using JQuery Droppables

I have a carousel basket that needs to handle more than one selector to be dropped into it. There are youtube video that needs to be accepted (Selector: ".youtubevideo"), yahoo videos that need to be accpeted (Selector: ".yahoovideo"). Here is the code i will make the code more useable later on.

The items are dragging easily but the carousel wont accept two different selectors which are ".yahoovideo" and ".youtubevideo" why is this?

DRAGGABLE

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 = '';

    }

});

DROPPABLE

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;

    }

});

Upvotes: 1

Views: 1599

Answers (2)

Meligy
Meligy

Reputation: 36624

Use , to support more than one selector. So, relevant part will be:

accept: '.youtubevideo,.yahoovideo'

Works in CSS and in jQuery.

.

Documentation: jQuery API: Multiple Selector (“selector1, selector2, selectorN”)

Upvotes: 2

glortho
glortho

Reputation: 13198

Do the two have the same callbacks (start and so forth)? If so, just add a common class to both and use that for accept, something like 

accept: '.video'

The other option is to turn accept into a function and have it return true based on your conditions:

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

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

Upvotes: 0

Related Questions