easyui-draganddrop/dist/easyui-draganddrop.css

Drag and drop elements including a file explorer and a rubbish bin.

.dragging {
  position: fixed;
  z-index: 10000;
}

ul.explorer {
  position: relative;
}
ul.explorer,
ul.explorer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}
ul.explorer li {
  margin: 0;
  padding: 0;
  border: 0;
  width: 10000px;
}

ul.explorer ul.entries {
  padding-left: 1.5rem;
}

ul.explorer li.collapsed.directory > ul.entries {
  display: none;
}


ul.explorer li > button {
  outline: none;
  border: none;
  height: 1.75rem;
  background-color: transparent;
}
ul.explorer li > button.toggle {
  width: 1.5rem;
}
ul.explorer li > button.name {
  text-align: left;
  background-repeat: no-repeat;
}
ul.explorer li.file > button.name {
  padding-left: 3rem;
  background-image: url("file.png");
  background-position: 1.5rem 0.25rem;
}
ul.explorer li.marker > button.name {
  color: rgba(0, 0, 0, 0);
  background-image: url("marker.png");
  background-position: 1.5rem 0.25rem;
}
ul.explorer li.directory > button.name {
  padding-left: 1.5rem;
  background-image: url("directory.png");
  background-position: 0 0.4375rem;
}

.rubbishBin {
  background-image: url("rubbishBin.png");
  width: 2rem;
  height: 2rem;
}
.open.rubbishBin {
  background-image: url("openRubbishBin.png");
}