Question

所以使用this as a starting point我试图将项目从一个滚动溢出拖到另一个，我已经完成了。问题是一旦项目（或者更确切地说是项目的克隆）在另一个滚动溢出中，它们不响应.mouseover（）。如果您决定不想要它们，那么想法是通过鼠标单击使第二个滚动溢出中的项目可以删除。我在下面使用的代码，任何帮助表示赞赏。

<!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>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("jquery", "1.4.0");
    google.load("jqueryui", "1.7.2");   
    google.setOnLoadCallback(OnLoad);
    function OnLoad(){
        var dropped = false;
        $(".tag_cell").draggable({ 
            addClasses: false,
            revert: 'invalid',
            containment: '#tagFun_div_main',
            helper: 'clone',
            appendTo: '#tagFun_div_helper',
            start: function(event, ui) {
                dropped = false;
                $(this).addClass("hide");
            },
            stop: function(event, ui) {
                if (dropped==true) {
                    $(this).remove();
                    console.log($(this));
                } else {
                    $(this).removeClass("hide");
                }
            }
        });
        $(".scrollbox").droppable({
            accept: '.tag_cell',
            hoverClass: 'tf_dropBox_hover',
            activeClass: 'tf_dropBox_active',
            drop: function(event, ui) {
                dropped = true;
                $.ui.ddmanager.current.cancelHelperRemoval = true;
                ui.helper.appendTo(this);
                ui.helper.attr("class","storeditem");
                ui.helper.attr("style","top:0px;left:0px;");
            }
        });

        $(".storeditem").mouseover(function(){
          $(this).attr("class","storeditem deleteable");
        });
        $(".storeditem").mouseout(function(){
          $(this).removeClass("deleteable");
        });

        $(".tag_cell").mouseover(function(){
          $(this).attr("class","tag_cell deleteable");
        });
        $(".tag_cell").mouseout(function(){
          $(this).removeClass("deleteable");
        });
    }
    </script>
    <style>
        div#tagFun_div_main { display:block; width:800px; height:400px; margin:auto; padding:10px; background:#F00; }
        div#tf_div_tagsReturn { display:block; width:200px; height:100%; float:left; overflow:auto; background:#000; }
        div#tf_div_tagsDrop { display:block; width:200px; height:100%; float:right; }
        div#tf_dropBox { display:block; width:100%; height:250px;}
        li.tag_cell { display:block; width:25px; height:25px; margin:1px; float:left; cursor:pointer; background:#0FF; z-index:99; }
        li.tag_cell.hide { display:none; }
        ul.scrollbox {  position: relative; width: 50px; height: 70px; overflow-x: hidden; 
            overflow-y: scroll; margin-right: auto; margin-left: auto; background-color: #4C5EB6;
        }
        .scrollbox li{ position: relative; margin: 1px; background-color: #fff; z-index: 2; 
            background:#0FF; color:#fff; width: 20px; height: 20px; margin-left: auto;
            margin-right: auto; list-style: none;
        }
        .scrollbox.tf_dropBox_hover { background:#FFF !important; }
        .scrollbox.tf_dropBox_active { background:#333; }
        .deleteable{ background-color: #2EB354 !important }

    </style>
</head>
<body>
    <div id="tagFun_div_main">
        Drag to blue box
        <ul id="tf_div_tagsReturn">
            <li class="tag_cell"></li>
            <li class="tag_cell"></li>
            <li class="tag_cell"></li>
            <li class="tag_cell"></li>
            <li class="tag_cell"></li>
            <li class="tag_cell"></li>
            <li class="tag_cell"></li>
            <li class="tag_cell"></li>
            <li class="tag_cell"></li>
            <li class="tag_cell"></li>
            <li class="tag_cell"></li>
        </ul>
        <div id="tf_div_tagsDrop">
            <div id="tf_dropBox">
                <ul class="scrollbox">
                </ul>
            </div>
        </div>

    </div>
    <div id="tagFun_div_helper">
    <!-- this is where the helper gets appended for temporary use -->
    </div>
</body>
</html>

Answer 1

使用helper='clone'时，您的元素事件不会与元素一起复制（在您的情况下，您的mouseover事件负责添加deleteable css类）。我建议你在可拖动的初始化中替换这一行：

helper: 'clone',

由：

helper: function() {
    // true to keep data and events
    return $(this).clone(true);
},

查看jQuery .clone()函数文档以获取更多信息

我设置了这个 jsFiddle 来说明这个解决方案

.mouseover在删除元素后停止工作

1 个答案: