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;
  overflow: hidden;
}
ul.explorer,
ul.explorer ul {
  margin: 0;
  padding: 0;
  border: 0;
}
ul.explorer li {
  margin: 0;
  padding: 0;
  border: 0;
  width: 10000px;
  list-style-type: none;
}

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.toggle::before {
  width: 1.5rem;
  content: '\025bc';
}
ul.explorer li > button.toggle.collapsed::before {
  content: '\025b6';
}

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;
}
ul.explorer li.marker > button.name {
  color: rgba(0, 0, 0, 0);
  background-image: url("marker.png");
  background-position: 1.5rem 0;
}
ul.explorer li.directory > button.name {
  padding-left: 1.5rem;
  background-image: url("directory.png");
  background-position: 0 0;
}

.rubbishBin {
  background-image: url("rubbishBin.png");
  width: 25px;
  height: 26px;
}
.open.rubbishBin {
  background-image: url("openRubbishBin.png");
}