CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
AgentElevenFifths
AgentElevenFifths

Reputation: 185

.mouseover stops working after dropping element

So using this as a starting point I'm trying to drag items from one scroll overflow to another, which I have accomplished. The problem is once the items (or rather the clones of the items) are in the other scroll overflow they do not respond to .mouseover(). The idea is to make the items in the second scroll overflow to be deletable with a mouse click if you decide you do not want them. Code I'm using below, any help appreciated.

<!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>

Upvotes: 0

Views: 77

Answers (1)

rd3n
rd3n

Reputation: 4560

When using helper='clone', your element events are not copied along with the element (in your case your mouseover event which is responsible of adding the deleteable css class). I can suggest you to replace this line in your draggable initialization:

helper: 'clone',

by:

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

Have a look in the jQuery .clone() function documentation for more info

I set up this jsFiddle to illustrate this solution

Upvotes: 2

Related Questions