Question

我正在尝试制作一个带有两个颜色div块（一个红色和一个绿色）和一个图像的容器，这些元素可以被拖动并克隆到放置区。图像被正确克隆，但我可以使代码适应不同的颜色块。我想我需要将background-color:green;下的.drag行调整为变量，但不确定如何。

＆＃13;

$(document).ready(function () {

    var x = null;

    //Make element draggable
    $(".drag").draggable({
        helper: 'clone', // allow to be dragged
        //cursor: 'move',
        //tolerance: 'fit'
    });

            $("#droppable").droppable({

                drop: function (e, ui) {

                    if ($(ui.draggable)[0].id != "") {
                        x = ui.helper.clone();
                    ui.helper.remove();
                    x.draggable({
                        helper: 'original', // once inside drop zone, dragged again makes it move in there
                        containment: '#droppable', // once dragged in drop zone, it's contained there
                        tolerance: 'fit' //?
                    });
                    /* x.resizable({
                        maxHeight: 40,
                        minHeight: 40,
                        minWidth: 50
                    }); */
                    x.appendTo('#droppable'); // once dragged into drop zone, append it there
                }

                }
            });

});

＆＃13;

.col{
    float:left;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
}

#col1{
    width:200px;
    height:500px;
    border:2px solid black;

}

.drag{
    width:100px;
    border:1px solid black;
    height:40px;
    position:relative;
    margin: 2px 2px 2px 2px;
    background-color:green;
}

#droppable{
    width:500px;
    height :500px;
    border:2px solid black;
    }

#drag1{
    background-color:red;
}

#drag2{
    background-color:green;
}

＆＃13;

<html>
    <head>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript" >
           google.load("jquery", "1.6.3");
           google.load("jqueryui", "1.8.16");
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
        <script src="dragndrop.js" type="text/javascript"></script>
        <link rel='stylesheet' href='style.css'>

    </head>
    <body>
        <div id="wrapper">
            <div class = "col" id="col1">
                <div id="drag1" class="drag">
                </div>
                <div id="drag2" class="drag">
                </div>
                <img src='img_logo.gif' id="drag3" class="drag">
                </div>
            </div>
            <div class="col" id ="droppable">
            </div>
        </div>
    </body>
</html>

＆＃13;

Answer 1

这里的答案很简单。 jQuery UI拷贝只能克隆类，而不是id，因为它的标识符只能在DOM中存在一次

所以只需更改drag1并将2拖到类

即可

$(document).ready(function () {

    var x = null;

    //Make element draggable
    $(".drag").draggable({
        helper: 'clone', // allow to be dragged
        //cursor: 'move',
        //tolerance: 'fit'
    });

            $("#droppable").droppable({

                drop: function (e, ui) {

                    if ($(ui.draggable)[0].id != "") {
                        x = ui.helper.clone();
                    ui.helper.remove();
                    x.draggable({
                        helper: 'original', // once inside drop zone, dragged again makes it move in there
                        containment: '#droppable', // once dragged in drop zone, it's contained there
                        tolerance: 'fit' //?
                    });
                    /* x.resizable({
                        maxHeight: 40,
                        minHeight: 40,
                        minWidth: 50
                    }); */
                    x.appendTo('#droppable'); // once dragged into drop zone, append it there
                }

                }
            });

});

.col{
    float:left;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
}

#col1{
    width:200px;
    height:500px;
    border:2px solid black;

}

.drag{
    width:100px;
    border:1px solid black;
    height:40px;
    position:relative;
    margin: 2px 2px 2px 2px;
    background-color:green;
}

#droppable{
    width:500px;
    height :500px;
    border:2px solid black;
    }

.drag1{
    background-color:red;
}

.drag2{
    background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
			  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
			  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
			  crossorigin="anonymous"></script>
<div id="wrapper">
            <div class = "col" id="col1">
                <div id="drag1" class="drag drag1">
                </div>
                <div id="drag2" class="drag drag2">
                </div>
                <img src='img_logo.gif' id="drag3" class="drag drag2">
                </div>
            </div>
            <div class="col" id ="droppable">
            </div>

Answer 2

分配给元素的ID必须是唯一的，因此克隆功能不会复制克隆的ID以防止其被打开。这可以防止应用样式。我通过将颜色应用为类来改变您的代码。

if((s[c][i]  >= 97 && s[c][i] <= 122))
{
x = s[c][i] - 'a';
    count1[x]++;
}


if( (s[c][i] >= 65 && s[c][i]  <= 90)))
{
x = s[c][i] - 'A';
    count2[x]++;
}

$(document).ready(function () {

    var x = null;

    //Make element draggable
    $(".drag").draggable({
        helper: 'clone', // allow to be dragged
        //cursor: 'move',
        //tolerance: 'fit'
    });

            $("#droppable").droppable({

                drop: function (e, ui) {

                    if ($(ui.draggable)[0].id != "") {
                        x = ui.helper.clone();
                    ui.helper.remove();
                    x.draggable({
                        helper: 'original', // once inside drop zone, dragged again makes it move in there
                        containment: '#droppable', // once dragged in drop zone, it's contained there
                        tolerance: 'fit' //?
                    });
                    /* x.resizable({
                        maxHeight: 40,
                        minHeight: 40,
                        minWidth: 50
                    }); */
                    x.appendTo('#droppable'); // once dragged into drop zone, append it there
                }

                }
            });

});

.col{
    float:left;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
}

#col1{
    width:200px;
    height:500px;
    border:2px solid black;

}

.drag{
    width:100px;
    border:1px solid black;
    height:40px;
    position:relative;
    margin: 2px 2px 2px 2px;
    background-color:green;
}

#droppable{
    width:500px;
    height :500px;
    border:2px solid black;
    }

.red {
    background-color:red;
}

.green {
    background-color:green;
}

如何克隆不同颜色的div块？

2 个答案: