关于drop事件在mouseup上消失

时间：2014-09-04 11:00:22

标签： javascript jquery javascript-events droppable

我在解决问题时遇到问题。在我松开鼠标按钮之前，ondrop选项保持可见。左边和右边有2列。左列中的项目将放入右列并触发动画类。我希望他们在右栏上掉落时开火。没人帮忙？

码 

<div class="wrapper">                                           
    <div class="left-column">
        <ul id="sortable1" class="sortable">
            <li class="ui-state-default"><a href=""><img src="img/icon-music.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-nav.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-seats.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-phone.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-weather.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-email.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-calendar.svg" /></a></li>
        </ul>
    </div>
    <div class="right-column">
        <ul id="sortable2" class="sortable">
            <li id="music" class="ui-state-highlight"></li>
            <li id="nav" class="ui-state-highlight"></li>
            <li id="climate" class="ui-state-highlight"></li>
            <li id="phone" class="ui-state-highlight"></li>
            <li id="weather" class="ui-state-highlight"></li>
            <li id="email" class="ui-state-highlight"></li>
            <li id="calendar" class="ui-state-highlight"></li>
        </ul>
    </div>
</div>

CSS 

#music li {
    height: 168px !important;
    width: 600px !important;
    background-image: url('img/no-clue-sm.png') !important;
    animation-name: fadeIn !important;
    -webkit-animation-name: fadeIn !important;  
    animation-duration: 0.8s !important;    
    -webkit-animation-duration: 0.8s !important;
    animation-timing-function: fadeIn !important;   
    -webkit-animation-timing-function: fadeIn !important;       
    visibility: visible !important;
}

music li {
    height: 168px !important;
    width: 600px !important;
    background-image: url('img/no-clue-sm.png') !important;
    animation-name: fadeIn !important;
    -webkit-animation-name: fadeIn !important;  
    animation-duration: 0.8s !important;    
    -webkit-animation-duration: 0.8s !important;
    animation-timing-function: fadeIn !important;   
    -webkit-animation-timing-function: fadeIn !important;       
    visibility: visible !important;
}


.left-column {
    width:60px;
    margin: 0px 0px 0px 5px;
    padding: 0px 0px 0px 0px;
    float: left;
    text-align: center;
    opacity: 0.7;
    overflow: hidden;
}

.right-column {
    width: 615px;
    height:  440px;
    float: left;
    margin: 0px 0px 0px 5px;
    padding: 10px;
    background: #2d2d2d;
    opacity: 0.7;
    overflow: hidden;
}

#sortable { 
    list-style-type: none; 
    float: left; 
    margin: 0px;
    padding: 0px;
}

#sortable1, #sortable2 { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    float: left;
}

#sortable1 li, #sortable2 li { 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 10px 0px; 
    width: 50px; 
}

#sortable2 li {
    overflow: hidden !important;    
    animation-name: fadeIn !important;
    -webkit-animation-name: fadeIn !important;  
    animation-duration: 0.8s !important;    
    -webkit-animation-duration: 0.8s !important;
    animation-timing-function: ease-in-out !important;  
    -webkit-animation-timing-function: ease-in-out !important;      
    visibility: visible !important; 
}

.ui-draggable, .ui-droppable {
background-position: top;
}

.droppedliclimate{
    height: 104px;
    background-image: url('img/climate-sm.png') !important;
    width: 590px !important;    
    overflow: hidden !important;    
    animation-name: fadeIn !important;  
    -webkit-animation-name: fadeIn !important;      
    animation-duration: 1.0s !important;        
    -webkit-animation-duration: 1.0s !important;    
    animation-timing-function: ease-in-out !important;      
    -webkit-animation-timing-function: ease-in-out !important;      
    visibility: visible !important; 
}

.droppedlinav{
    height: 81px;
    background-image: url('img/map-sm.png') !important;
    width: 590px !important;        
    overflow: hidden !important;    
    animation-name: fadeIn !important;  
    -webkit-animation-name: fadeIn !important;      
    animation-duration: 1.0s !important;        
    -webkit-animation-duration: 1.0s !important;    
    animation-timing-function: ease-in-out !important;      
    -webkit-animation-timing-function: ease-in-out !important;      
    visibility: visible !important; 
}

.droppedliweather{
    height: 143px;
    background-image: url('img/weather-sm.png') !important;
    width: 590px !important;        
    overflow: hidden !important;    
    animation-name: fadeIn !important;  
    -webkit-animation-name: fadeIn !important;      
    animation-duration: 1.0s !important;        
    -webkit-animation-duration: 1.0s !important;    
    animation-timing-function: ease-in-out !important;      
    -webkit-animation-timing-function: ease-in-out !important;      
    visibility: visible !important; 
}

.droppedliphone{
    height: 110px;
    background-image: url('img/phone-sm.png') !important;
    width: 590px !important;    
    overflow: hidden !important;    
    animation-name: fadeIn !important;  
    -webkit-animation-name: fadeIn !important;      
    animation-duration: 1.0s !important;        
    -webkit-animation-duration: 1.0s !important;    
    animation-timing-function: ease-in-out !important;      
    -webkit-animation-timing-function: ease-in-out !important;      
    visibility: visible !important; 
}

.droppedlimusic {
    height: 168px !important;
    background-image: url('img/no-clue-sm.png') !important;
    width: 600px !important;        
    overflow: hidden !important;    
    animation-name: fadeIn !important;  
    -webkit-animation-name: fadeIn !important;      
    animation-duration: 1.0s !important;        
    -webkit-animation-duration: 1.0s !important;    
    animation-timing-function: ease-in-out !important;      
    -webkit-animation-timing-function: ease-in-out !important;      
    visibility: visible !important; 
}

.droppedlicalendar{
    height: 158px;
    background-image: url('img/calendar-sm.png') !important;
    width: 590px !important;    
    overflow: hidden !important;    
    animation-name: fadeIn !important;  
    -webkit-animation-name: fadeIn !important;      
    animation-duration: 1.0s !important;        
    -webkit-animation-duration: 1.0s !important;    
    animation-timing-function: ease-in-out !important;      
    -webkit-animation-timing-function: ease-in-out !important;      
    visibility: visible !important; 
}

.droppedliemail{
    height: 121px;
    background-image: url('img/email-sm.png') !important;
    width: 590px !important;    
    overflow: hidden !important;    
    animation-name: fadeIn !important;  
    -webkit-animation-name: fadeIn !important;      
    animation-duration: 1.0s !important;        
    -webkit-animation-duration: 1.0s !important;    
    animation-timing-function: ease-in-out !important;      
    -webkit-animation-timing-function: ease-in-out !important;      
    visibility: visible !important; 
}

@keyframes drop {
0% {
    transform: scale(0);
    opacity: 0.0;       
}
60% {
    transform: scale(1.1);  
}
80% {
    transform: scale(0.9);
    opacity: 1; 
}   
100% {
    transform: scale(1);
    opacity: 1; 
}       

@-webkit-keyframes drop {
0% {
    -webkit-transform: scale(0);
    opacity: 0.0;       
}
60% {
    -webkit-transform: scale(1.1);
}
80% {
    -webkit-transform: scale(0.9);
    opacity: 1; 
}   
100% {
    -webkit-transform: scale(1);
    opacity: 1; 
}
.left-column {
    width: 175px;
    height: 200px;
    overflow:scroll;
    float: left;
}
.right-column {
    width:175px;
    height:200px;
    overflow:scroll;
    float: left;
}

#sortable { 
    border:#666 solid;
    list-style-type: none; 
    float: left; 
    margin-right: 5px; 
    margin-left: 5px;
}

#sortable1, #sortable2 { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    float: left; 
    margin-right: 10px;
}

#sortable1 li, #sortable2 li { 
    margin: 0 0px 5px 5px; 
    padding: 5px; 
    font-size: 1.2em; 
    width: 120px; 
}

body {
    font-size: 62.5%;
    font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}

#sortable2 li {

}

.ui-draggable, .ui-droppable {
    background-position: top;
}
.dropped {
    overflow: hidden;
}

.droppedliclimate{
    height: 104px;
    background-image: url('img/climate-sm.png') !important;
}

.droppedlinav{
    height: 81px;
    background-image: url('img/map-sm.png') !important;
}

.droppedliweather{
    height: 143px;
    background-image: url('img/weather-sm.png') !important;
}

.droppedliphone{
    height: 110px;
    background-image: url('img/phone-sm.png') !important;
}

.droppedlimusic{
    padding: 5px !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    background-repeat: no-repeat !important;
    background-image: url('img/icon-music.svg') !important;
    width: 65px !important;
    height: 65px !important;
    display: visible !important;
    height: 168px;
    width: 590px;
    background-image: url('img/no-clue-sm.png') !important;
}

.droppedlicalendar{
    height: 158px;
    background-image: url('img/calendar-sm.png') !important;
}

.droppedliemail{
    height: 121px;
    background-image: url('img/email-sm.png') !important;
}
#hideme {
    visibility: hidden;
    display: none;
}

.hideme {
    visibility: hidden;
    display: none;
}

.music-fnc {
    padding: 5px !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    background-repeat: no-repeat !important;
    background-image: url('img/icon-music.svg') !important;
    width: 65px !important;
    height: 65px !important;
    display: visible !important;
}

.ui-sortable:after {
    content: 'music';
}

脚本 

<script type="text/javascript">
  var lists = [{
    "listid": "#all-colls-list",
    "connectid": "#coll-selected-list"
}, {
    "listid": "#coll-selected-list",
    "connectid": "#all-colls-list"
}];
//Apply Sort on each list
$.each(lists, function(i, list) {
    $(list.listid).sortable({
    connectWith: list.connectid,
    opacity: 0.7,
    start: function(event, ui) {
       if ($(ui.item).parents('#all-colls-list').length > 0) {
           $(ui.item).addClass('dropped');
       } else {
           $(ui.item).addClass('sorted');
      }
},
stop: function(event, ui) {
    if ($(ui.item).parents('#all-colls-list').length > 0) {
        $(ui.item).switchClass('droppedli', 'sortedli');
    } else {
       $(ui.item).switchClass('sortedli', 'droppedli');
}
       $('#music').droppable({activeClass:'droppedlimusic'});
       $(ui.item).removeClass('sorted');
       $(ui.item).removeClass('dropped');
      }
   });
 });
 //Sortable Section
 $(function(){
  $("#sortable1").sortable({
    helper:"clone",
    connectWith: "#sortable2",
    start:function(event,ui){
      saveMe = $(ui.item).clone();
      startingList = $(ui.item).parent();
      $(ui.item).show();
      saveMe.insertAfter($(ui.item) ).hide();
    },
    stop: function(event, ui){
        if(startingList.attr("id") == $(ui.item).parent().attr("id") ) {
            // At this point, we've dropped it on the original list.
            //  Remove the clone we made.
            saveMe.remove();
        }
        else {  
            // this can be done either here, or in the remove() func.
            //  I'm thinking this is more intuitive than to re-display
            //  the item in the remove func.
            saveMe.show();
        }
    }
  }).disableSelection();
  $("#sortable2").sortable({
        helper:"clone",
        start: function(event, ui){
            $(ui.item).show();
        },
    }).disableSelection();
    $(init);
    $('#music').droppable({activeClass:'droppedlimusic'});
    function init() {
      $('#music').draggable();
      $('#music').droppable({
      });
    }
    function onDrop(event)
{
  var data = event.dataTransfer.getData("text/plain");
  event.target.textContent = data;
  event.preventDefault();
}
});
</script>

0 个答案:

没有答案
相关问题
最新问题