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 event中执行此操作，您可以获取此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);
    }
  });
});

<强>更新

如果您想更改background image的{{1}}，您也会在放弃事件中进行更改，但您将使用droppable element

获取droppable element

$(this)

更新了演示：https://jsfiddle.net/9vmw4mtc/9/

$(this).parent().css('background-image','your new background here');

放入内部时更改可放置的图像

1 个答案: