CSS
.box_div{
height: 100px;
}
.img-div img {
width:100px;
height:100px;
float: left;
}
.img-div {
float: left;
}
.drop-left,.drop-right {
width: 50px;
height: 100px;
float: left;
}
HTML
<div class="box_div">
<div class="img-div">
<div class="drop-left"></div>
<img src="http://photos.tuchong.com/38538/f/6864556.jpg" draggable="true">
<div class="drop-right"></div>
</div>
<div class="img-div">
<img src="http://photos.tuchong.com/349669/f/6695960.jpg" draggable="true">
<div class="drop-right"></div>
</div>
<div class="img-div">
<img src="http://photos.tuchong.com/349669/f/6683901.jpg" draggable="true">
<div class="drop-right"></div>
</div>
<div class="img-div">
<img src="http://photos.tuchong.com/349669/f/5121337.jpg" draggable="true">
<div class="drop-right"></div>
</div>
</div>
<br>
<div class="box_div">
<div class="img-div">
<div class="drop-left"></div>
<img src="http://photos.tuchong.com/38538/f/6864556.jpg" draggable="true">
<div class="drop-right"></div>
</div>
<div class="img-div">
<img src="http://photos.tuchong.com/349669/f/6695960.jpg" draggable="true">
<div class="drop-right"></div>
</div>
<div class="img-div">
<img src="http://photos.tuchong.com/349669/f/6683901.jpg" draggable="true">
<div class="drop-right"></div>
</div>
<div class="img-div">
<img src="http://photos.tuchong.com/349669/f/5121337.jpg" draggable="true">
<div class="drop-right"></div>
</div>
</div>
JS
效果图：
标签：位置,img,拖动,float,100px,height,div,图片,left From： https://www.cnblogs.com/zhaofen/p/17106179.html