javascript - 放入内部时更改可放置图像

Question

我不擅长 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);
    }
  });
});

Answer 1

你可以在 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);
    }
  });
});