可拖放時停止更改圖像

Question

我是新的jquery ..我想要當我的圖標拖放到可拖動的懸停圖像停止更改圖像時，它被放在裏面..我不知道如何做它..現在，每當我徘徊和搬出它的變化的形象..我想要的時候有圖標可拖動的懸停和出局只有當沒有圖標可拖動的懸停和出圖像再次工作..

的jsfiddle

https://jsfiddle.net/xInfinityMing/tsc0no9g/ 

的Java：

$(function() { 
$("#dragIcons img").draggable({ 
revert: "invalid", 
refreshPositions: true, 
drag: function(event, ui) { 
    ui.helper.removeClass("end-draggable"); 
    ui.helper.addClass("draggable"); 
}, 
stop: function(event, ui) { 
    ui.helper.addClass("end-draggable"); 
    ui.helper.removeClass("draggable"); 
} 
}); 
$("#briefcase-full").droppable({ 
    over: function(event, ui) { 
    $(this).parent().css('background-image','url("http://icons.iconarchive.com/icons/dtafalonso/yosemite-flat/512/Folder-icon.png")'); 
    }, 
    out: function(event, ui) { 
    $(this).parent().css('background-image', 'url("https://cdn0.iconfinder.com/data/icons/snow_sabre_silver/512/folder_web_upload.png")'); 
    }, 
    drop: function(event, ui) { 
    $(this).parent().css('background-image','url("http://icons.iconarchive.com/icons/dtafalonso/yosemite-flat/512/Folder-icon.png")'); 
    if ($("#briefcase").length == 0) { 
    $("#briefcase-droppable").html(""); 
    } 
     ui.draggable.addClass("dropped"); 
     $("#briefcase-droppable").append(ui.draggable); 
    } 
    }); 
}); 

Answer 1

我增加了簡單的檢查以發現briefcase-droppable容器有任何圖標加已經在使用if(!($("#briefcase-droppable").find(".ui-draggable").length))。

下面是一個簡單的工作代碼

$(function() { 
 
    $("#dragIcons img").draggable({ 
 
    revert: "invalid", 
 
    refreshPositions: true, 
 
    drag: function(event, ui) { 
 
     ui.helper.removeClass("end-draggable"); 
 
     ui.helper.addClass("draggable"); 
 
    }, 
 
    stop: function(event, ui) { 
 
     ui.helper.addClass("end-draggable"); 
 
     ui.helper.removeClass("draggable"); 
 
    } 
 
    }); 
 
    $("#briefcase-full").droppable({ 
 
    over: function(event, ui) { 
 
     if (!($("#briefcase-droppable").find(".ui-draggable").length)) { 
 
     $(this).parent().css('background-image', 'url("http://icons.iconarchive.com/icons/dtafalonso/yosemite-flat/512/Folder-icon.png")'); 
 
     } 
 
    }, 
 
    out: function(event, ui) { 
 
     if (!($("#briefcase-droppable").find(".ui-draggable").length)) { 
 

 
     $(this).parent().css('background-image', 'url("https://cdn0.iconfinder.com/data/icons/snow_sabre_silver/512/folder_web_upload.png")'); 
 
     } 
 

 
    }, 
 
    drop: function(event, ui) { 
 
     $(this).parent().css('background-image', 'url("http://icons.iconarchive.com/icons/dtafalonso/yosemite-flat/512/Folder-icon.png")'); 
 
     if ($("#briefcase").length == 0) { 
 
     $("#briefcase-droppable").html(""); 
 
     } 
 
     ui.draggable.addClass("dropped"); 
 
     $("#briefcase-droppable").append(ui.draggable); 
 
    } 
 
    }); 
 
});

.draggable { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1.0; 
 
    z-index: 100; 
 
    transition: none !important; 
 
    animation: pulse 0.4s alternate infinite; 
 
} 
 
.end-draggable { 
 
    animation: 0; 
 
} 
 
.dropped { 
 
    position: static !important; 
 
    transition: none !important; 
 
    animation: 0; 
 
} 
 
#dragIcons { 
 
    padding: 5px; 
 
    min-height: 100px; 
 
    width: 500px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#briefcase { 
 
    height: 250px; 
 
    width: 250px; 
 
    background: url("http://icons.iconarchive.com/icons/mcdo-design/smooth-leopard/256/Upload-Folder-Blue-icon.png"); 
 
    background-position: background-repeat: no-repeat; 
 
    position: absolute; 
 
} 
 
#briefcase-open { 
 
    height: 250px; 
 
    width: 250px; 
 
    margin-left: 300px; 
 
    background: url("https://cdn0.iconfinder.com/data/icons/snow_sabre_silver/512/folder_web_upload.png"); 
 
    background-position: background-repeat: no-repeat; 
 
    position: absolute; 
 
} 
 
#briefcase-droppable { 
 
    border-style: solid; 
 
    height: 300px; 
 
    width: 300px; 
 
} 
 
@keyframes pulse { 
 
    100% { 
 
    transform: scale(1.1); 
 
    } 
 
} 
 
#briefcase-full { 
 
    border-style: solid; 
 
    height: 300px; 
 
    width: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> 
 
<div id="dragIcons"> 
 
    <img width="100px" height="100px" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/MS_Office_Upload_Center.png"> 
 
    <img width="100px" height="100px" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/MS_Office_Upload_Center.png"> 
 
    <img width="100px" height="100px" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/MS_Office_Upload_Center.png"> 
 
    <img width="100px" height="100px" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/MS_Office_Upload_Center.png"> 
 
</div> 
 
<div id="briefcase"> 
 
    <div id="briefcase-full"> 
 
    </div> 
 
    <div id="briefcase-droppable"> 
 
    </div> 
 
</div>