我不擅长 jquery.. 我想在拖放到 droppable 中时更改 droppable 图像.. 我该如何更改它?当可放置在可放置框中时,我需要更改可放置图像。请帮忙!
jsFiddle
https://jsfiddle.net/xInfinityMing/9vmw4mtc/6/
HTML:
<div id="dragIcons">
<img width="100px" height="100px" src="assets/img/gebiz.png">
<img width="100px" height="100px" src="assets/img/b2b.png">
<img width="100px" height="100px" src="assets/img/pitches.png">
<img width="100px" height="100px" src="assets/img/creative.png">
</div>
<div id="briefcase">
<div id="briefcase-droppable">
</div>
</div>
CSS:
.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: 485px;
width: 600px;
margin-left: 300px;
background: url("../../../assets/img/folder.png");
background-position:
background-repeat: no-repeat;
position: absolute;
}
#briefcase-open
{
height: 485px;
width: 600px;
margin-left: 300px;
background: url("../../../assets/img/folder-open.png");
background-position:
background-repeat: no-repeat;
position: absolute;
}
#briefcase-droppable
{
border-style: solid;
height: 285px;
width: 450px;
margin-left: 80px;
margin-top: 110px;
}
@keyframes pulse {
100% {
transform: scale(1.1);
}
}
** JS: **
$(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-droppable").droppable({
drop: function (event, ui) {
if ($("#briefcase").length == 0) {
$("#briefcase-droppable").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase-droppable").append(ui.draggable);
}
});
});
最佳答案
你可以在 drop 事件
中做到这一点你可以获得像这样的可拖动元素 ui.draggable
所以要改变你的图像源,例如你应该做的
ui.draggable.attr('src','Your new source Here');
演示:https://jsfiddle.net/9vmw4mtc/8/
js:
$(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-droppable").droppable({
drop: function(event, ui) {
ui.draggable.attr('src','https://image.freepik.com/free-icon/double-up-arrow-angles_318-53141.png');
if ($("#briefcase").length == 0) {
$("#briefcase-droppable").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase-droppable").append(ui.draggable);
}
});
});
更新:
如果你想改变 droppable element
的 background image
你也可以在 drop 事件中设置它但是你会得到 droppable element
使用 $(this)
$(this).parent().css('background-image','your new background here');
更新演示:https://jsfiddle.net/9vmw4mtc/9/
$(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-droppable").droppable({
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);
}
});
});
关于javascript - 放入内部时更改可放置图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37523510/