ドロップ可能な停止時にドラッグアンドドロップする

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>