Question

我正在使用jQuery处理拖放应用程序。

然而，我遇到的问题是，当我拖放图像时，它会复制图像。

我确实尝试删除了这样的给定类：ui.helper.removeClass("draggable");

但我仍然看到图片重复，我不明白导致此问题的原因。

这是我的全部代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        #dvSource img
        {
            height: 100px;
            width: 100px;
            margin: 2px;
        }
        .draggable
        {
            filter: alpha(opacity=60);
            opacity: 0.6;
        }
        .dropped
        {
            position: static !important;
        }
        #dvSource, #dvDest
        {
            border: 5px solid #ccc;
            padding: 5px;
            min-height: 100px;
            width: 430px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://code.jquery.com/ui/1.8.24/themes/blitzer/jquery-ui.css" rel="stylesheet"
        type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("#dvSource img").draggable({
                revert: "invalid",
                refreshPositions: true,
                drag: function (event, ui) {
                    ui.helper.addClass("draggable");
                },
                stop: function (event, ui) {
                    ui.helper.removeClass("draggable");
                    var image = this.src.split("/")[this.src.split("/").length - 1];
                    if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
                        //alert(image + " dropped.");
                    }
                    else {
                        alert(image + " not dropped.");
                    }
                }
            });
            $("#dvDest").droppable({
                drop: function (event, ui) {
                    if ($("#dvDest img").length == 0) {
                        $("#dvDest").html("");

                    }
                    ui.helper.removeClass("draggable");
                    ui.draggable.addClass("dropped");
                    //$("#dvDest").append(ui.draggable).clone();
                    $("#dvDest").append($(ui.draggable).clone());






                }
            });
        });
    </script>
    <div id="dvSource">
        <img alt="" src="images/Chrysanthemum.jpg" />
        <img alt="" src="images/Desert.jpg" />
        <img alt="" src="images/Hydrangeas.jpg" />
        <img alt="" src="images/Jellyfish.jpg" />
        <img alt="" src="images/Koala.jpg" />
        <img alt="" src="images/Lighthouse.jpg" />
        <img alt="" src="images/Penguins.jpg" />
        <img alt="" src="images/Tulips.jpg" />
    </div>
    <hr />
    <div id="dvDest">
        Drop here
    </div>
</body>
</html>

有人可以就此问题提出建议吗？

Answer 1

问题是函数在这里被调用了两次：

if($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
....

jQuery已经调用drop但你手动再次调用它。这不是检查事件的正确方法，但它再次调用事件。只需删除您编码的if...else子句就像魅力一样！

您也将对象变形为$（），但该对象也是一个jquery对象。你不需要这样做

// NOT $("#dvDest").append($(ui.draggable).clone());
$("#dvDest").append(ui.draggable.clone());

Jquery克隆函数在拖放时创建重复的图像？

1 个答案: