Yi Ming Yi Ming - 6 months ago 49
Javascript Question

drag and drop when droppable stop change image

I'm new in jquery.. I want when my icons drag and drop inside the droppable the hover image stop changing image when it is dropped inside.. I'm not sure how to do it.. Now whenever I hover and move out it's changing image.. I wanted when there is icons inside droppable the hover and out is disable only when there is no icons inside droppable the hover and out image works again..

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

I am adding a simple check to find if the briefcase-droppable container has any icons added already using if(!($("#briefcase-droppable").find(".ui-draggable").length)).

Here is a simple working code

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

Comments