JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<script src="https://cdn.bootcss.com/cropper/4.0.0/cropper.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/cropper/4.0.0/cropper.css">
<div class="container">
  <div class="body">
    <div class="box box-1" draggable="true" ondrop="drop(event,this)" ondragover="allowDrop(event)" ondragstart="drag(event, this)"></div>
    <div class="box box-2" draggable="true" ondrop="drop(event,this)" ondragover="allowDrop(event)" ondragstart="drag(event, this)"></div>
    <div class="box box-3" draggable="true" ondrop="drop(event,this)" ondragover="allowDrop(event)" ondragstart="drag(event, this)"></div>
    <div class="box box-4" draggable="true" ondrop="drop(event,this)" ondragover="allowDrop(event)" ondragstart="drag(event, this)"></div>
  </div>

  <div class="bottom">
    <span type="button" class="btn btn-ok">确定</span>
  </div>
</div>

<input id="btnfile" type="file" value="更换图片" style="display: none;" />

CSS

body {
  background-color: #0ff;
}

.container {
  width: 324px;
  height: 475px;
  padding: 12px;
  background-color: #fff;
  box-sizing: border-box;
}

.box {
  background: #f0f0f0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAYAAABXuSs3AAAATUlEQVR42u3UIQ4AIAwEwf7/c/cksJAgahBNZpPTHdWqDyVZ52pK4ODg4ODg4ODg4ODg4OCvI1MGDt6F+yrg4ODg4ODg4ODg4ODg4Hcbbwa0vYsfW1QAAAAASUVORK5CYII=) no-repeat;
  background-position: center;
  margin-bottom: 10px;
}

.box-1 {
  width: 300px;
  height: 300px;
}

.box-2 {
  width: 96px;
  height: 96px;
  float: left;
}

.box-3 {
  width: 96px;
  height: 96px;
  float: left;
  margin-left: 6px;
}

.box-4 {
  width: 96px;
  height: 96px;
  float: right;
}

.bottom {
  text-align: center;
}

.btn {
  display: inline-block;
  width: 80%;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

.btn-ok {
  background-color: #ff2c55;
  color: #fff;
  border: 1px solid #ff2c55;
}

.btn-ok:hover {
  background-color: #e9355d;
}

JavaScript

/* 照片拖拽互换内容 */
function allowDrop(e) {
  e.preventDefault();
}

var dragDiv = null;

function drag(e, divdom) {
  dragDiv = divdom;
}

function drop(e, acceptDiv) {
  e.preventDefault();
  if (!dragDiv || dragDiv == acceptDiv)
    return;

  var tempHtml = dragDiv.innerHTML;
  dragDiv.innerHTML = acceptDiv.innerHTML;
  acceptDiv.innerHTML = tempHtml;

  dragDiv = null;
}

var urls = [
  'https://qiniu.qiubg.com/bb2018071801.jpg',
  'https://qiniu.qiubg.com/bb2018071802.jpg',
  'https://qiniu.qiubg.com/bb2018071803.jpg',
  'https://qiniu.qiubg.com/bb2018071804.jpg',
  'https://qiniu.qiubg.com/bb2018071805.jpg',
  'https://qiniu.qiubg.com/bb2018071806.jpg'
]

var randIndex = Math.floor((50 * Math.random()) / 10);
urls.splice(randIndex, 1);

$('.box').each(function(index, item) {
  $(this).html('<img width="100%" height="100%" src="' + urls[index] + '" />');
});

$('.btn-ok').on('click', function(){
	layer.alert('你想干什么', {icon: 1});
})

$('.box').on('click', function(){
    $('#btnfile').val('');
    $('#btnfile').click();
})

var img = null;
$('#btnfile').on("change.custom.select", function(e){
    img = e.target;
	console.log(img);
    console.log(img.files);
    console.log(img.files[0]);
    
    layer.msg('图片已经选中', {
        icon: 16, shade: 0.03, time:3000
    });
});