Question

我是jquery的新手..我想当我的图标拖放到droppable内时，悬停图像停止更改图像时，它被放入里面..我不知道该怎么做..现在每当我盘旋并且移出它正在改变的图像..我想当有图标里面的droppable时，悬停和禁用只有当没有图标里面的droppable时，悬停和图像再次工作..

的jsfiddle

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

爪哇：

$(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>

拖放停止更改图像时拖放

1 个答案: