Firefox draggable bug

by Yukino Song

HTML

<div class="mainFrame">
  <div class="contentFrame">
    <div class="section">
      <p class="sub">DEMO</p>
      <div class="center">
        <div class="centerItem listContainer">
          <div>
            <div class="listItem" draggable="true">
              Item 1
              <i>x</i>
            </div>
          </div>
          <div>
            <div class="listItem" draggable="true">
              Item 2
              <i>x</i>
            </div>
          </div>
          <div>
            <div class="listItem" draggable="true">
              Item 3
              <i>x</i>
            </div>
          </div>
        </div>
        <!--<div class="centerItem listContainer">
          <div class="listItem" draggable="true">Drop items here</div>
          <div class="listItem" draggable="true">Item 4</div>
          <div class="listItem" draggable="true">Item 2</div>
        </div>
        <div class="centerItem listContainer">
          <div class="listItem" draggable="true">Drag me!</div>
          <div class="listItem" draggable="true">Also drop here</div>
          <div class="listItem" draggable="true">Item 3</div>
        </div>-->
      </div>
    </div>
	</div>
</div>

CSS

* {
	box-sizing: border-box;
}
html {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-family: Helvetica, Tahoma, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", STXihei, STHeiti, Heiti, SimSun, sans-serif;
}
body {
	margin: 0;
	padding: 0;
	background-color: #ECECEC;
}

.contentFrame {
	position: relative;
	padding: 40px 40px;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	background-color: #FFF;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.30);
}
p {
	padding-left: 15px;
	line-height: 26px;
}
.sub {
	border-left: 5px solid #F06292;
	padding-left: 10px;
	line-height: 20px;
	font-size: 20px;
}
.section {
	margin: 20px 0;
	overflow: hidden;
}
.center {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.centerItem {
	flex-grow: 0;
	flex-shrink: 1;
	margin: 10px 10px;
	border: 1px solid #DEDEDE;
	border-radius: 3px;
}
.listContainer {
	height: 202px;
	width: 240px;
	overflow-y: auto;
}
.listItem {
	width: 100%;
	cursor: move;
	background-color: #FFF;
	border-bottom: 1px solid #DEDEDE;
	border-left: 5px solid #DEDEDE;
	padding-left: 15px;
	height: 40px;
	line-height: 40px;
	background-color: #F8F8F8;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: border-left .3s;
}
.listItem:hover {
	border-left: 10px solid #DEDEDE;
}
.listItem>i {
  position: absolute;
}

JavaScript

for (let i of [...document.querySelectorAll('.listItem')]) {
	const container = i.parentNode
	const placeHolder = i.cloneNode(true)
  const removeHolder = (e) => {
  	e.stopImmediatePropagation()
    e.preventDefault()
  	console.log('mouseup', i)
  	container.removeChild(placeHolder)
    i.style.display = 'block'
    window.removeEventListener('mouseup', removeHolder, true)
  }
  i.addEventListener('mousedown', (e) => {
  	console.log('mousedown', i)
    container.insertBefore(placeHolder, i)
    i.style.display = 'none'
    window.addEventListener('mouseup', removeHolder)
  })
	i.addEventListener('dragstart', (e) => {
    console.log('drag', i)
  })
}

for (let i of [...document.querySelectorAll('i')]) {
	i.addEventListener('mouseup', (e) => {
  	console.log('mouseup', i)
  	i.blur()
    e.stopImmediatePropagation()
    e.stopPropagation()
  })
	i.addEventListener('click', (e) => {
  	console.log('click', i)
  })
}