Sortable.js拖拽排序⽅法，以及案例使⽤⼼得
最近有个新的需求，把点击事件改为⿏标拖拽添加我们想要的东西⽅便编辑部的⼩伙伴操作，demo如下：
⽼的版本是点击+加号，将我们输⼊的⽂本还有图⽚添加到空⽩区域，现改为拖拽的⽅式最左侧有⼀个隐藏了的垃圾筒，我们拖拽内容区的⽂本、视频、图⽚到这个隐藏的垃圾桶上⽅，内容区的当前脱宅的内容就会被垃圾桶回收，在这⾥使⽤到了Sorttable.js插件满⾜了⼀点⼩的需求，但是这个插件还是很庞⼤的，也上百度搜了⼀个⼤佬的使⽤⼼得，于是就拿来使⽤了，我们吧右侧编辑好的⽂本，视频，图⽚拖拽到内容区默认是append进去的，顾名思义就是从底部插⼊的，在这⾥我使⽤了Sortable.js插件实现了在内容区域可⼿动拖拽排序，也就是标题和⽂字，图⽚，视频的位置可以排序，这样我们输出的代码也就是按照我们排序的最终结果输出的，废话不多说了，相信你们更像看看代码吧
另外补充⼀点的是，⼀说起拖拽我们⾸先想到的就是h5的drop事件，完全能够解决我们现有的需求了……
html代码：
<div class="edit">
<div class="remove" id="remove"></div>
<div class="left block__list block__list_words" id="left"></div>
<div class="right" id="right">
<div class="add_line">
<h4>添加标题</h4>
<div class="input-line">
<input class="ipt" type="text" name="title" value="" draggable="true">
<span>+</span>
</div>
</div>
<div class="add_line">
<h4>添加⽂字</h4>
<div class="input-line">
<input class="ipt" type="text" name="text" value="" draggable="true">
<span>+</span>
</div>
</div>
<div class="add_line">
<h4>添加图⽚地址</h4>
<div class="input-line">
<input class="ipt" type="text" name="img" value="" draggable="true">
<span>+</span>
</div>
</div>
<div class="add_line">
<h4>添加视频地址</h4>
<div class="input-line">
<input class="ipt" type="text" name="video" value="" placeholder="视频地址" draggable="true">
<span>+</span>
</div>
<div class="input-line">
<input class="ipt" type="text" name="video-img" value="" placeholder="封⾯地址" draggable="true"> </div>
</div>
<div class="add_line">
<h4>修改参数</h4>
<div class="input-line" draggable="false">
<input type="text" name="xg" value="">
<i id="xgcs">修改</i>
</div>
</div>
<div class="btn-line">
<div class="btn-line">
<div class="output">输出代码</div>
<div class="fanput">反向输出</div>
</div>
</div>
</div>
<div class="upload">
<div class="text">上传图⽚:</div>
<input type="file" id="UpPicUrl1" name="filedata">
<span class="text_input">点击上传</span>
<input type="text" name="fileshow" value="" placeholder="已经上传的地址">
</div>
<textarea class="outline"></textarea>
style:
/*样式重置start*/
html,body,div,ul,li,h1,h2,h3,h4,h5,p,em,i,img,input,textarea {margin: 0px;padding: 0px;}
a {text-decoration: none;}
li {list-style: none;}
em,i {font-style: normal;}
body {font-family: arial, 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;}
.edit {padding-top: 30px;overflow: hidden;min-width: 1400px;}
.edit .left {float: left;width: 400px;height: 500px;border: 1px solid #333;padding-top: 10px;overflow-y: auto;}
.edit .right {float: left;overflow: hidden;padding-left: 30px;}
.edit .right .add_line {overflow: hidden;margin-bottom: 10px;}
.edit .right .add_line h4 {height: 40px;line-height: 40px;font-size: 20px;color: #333;}
.edit .right .add_line .input-line {overflow: hidden;}
.
edit .right .add_line .input-line input {float: left;width: 500px;padding: 0 20px;height: 34px;background: none;border:
1px solid #aaa;}
.edit .right .add_line .input-line span {float: left;margin-right: 20px;width: 36px;height: 36px;background-color:
#f9513b;text-align: center;line-height: 34px;font-size: 30px;color: #fff;cursor: pointer;}
.edit .right .add_line .input-line i {float: left;margin-right: 20px;padding: 0 15px;height: 36px;background-color:
#f9513b;text-align: center;line-height: 34px;font-size: 15px;color: #fff;cursor: pointer;}
.edit .right .btn-line {height: 50px;overflow: hidden;}
.edit .right .output,.edit .right .fanput {float: left;width: 200px;height: 50px;border: 0 none;border-radius:
10px;background-color: #f9513b;text-align: center;font-size: 20px;color: #fff;line-height: 50px;cursor: pointer;margin-right: 20px;}
right: 20px;}
.edit .left .add-part {position: relative;border: 1px dashed #ccc;width: 90%;padding: 10px;margin: 0 auto 10px;cursor: pointer;}
.edit .left .add-part .close {position: absolute;top: 0;left: 0;width: 20px;height: 20px;background-color: #ccc;font-size:
15px;text-align: center;line-height: 20px;cursor: pointer;}
.edit .left .add-part .add {position: absolute;top: 0;right: 0;width: 20px;height: 20px;background-color: #ccc;font-size:
15px;text-align: center;line-height: 20px;cursor: pointer;}
.edit .left .add-part h5 {text-align: center;height: 30px;font-size: 20px;color: #333;cursor: pointer;}
.edit .left .add-part p {text-align: center;line-height: 24px;font-size: 16px;color: #333;}
.edit .left .add-part img {display: block;width: 100%;height: auto;}
.edit .left .add-part video {display: block;width: 100%;height: auto;}
.outline {display: block;width: 1180px;height: 200px;text-align: left;font-size: 16px;color: #333;margin: 0 auto;padding: 10px;}
.upload {position: relative;width: 1200px;margin: 20px auto;overflow: hidden;}
.upload .text {float: left;height: 36px;width: 100px;text-align: left;font-size: 16px;color: #333;line-height: 36px;}
.upload input[name=filedata] {position: absolute;top: 0;left: 100px;padding: 0;border: 0;height: 36px;width: 120px;float: left;opacity: 0;filter: alpha(opacity=0);}
.upload .text_input {float: left;height: 36px;width: 120px;line-height: 36px;color: #fff;background: #f40;text-align: center}
.upload input[name=fileshow] {float: left;background: none;border: 0 none;width: 600px;height: 34px;border: 1px solid #aaa;padding: 0 10px;margin-left: 20px;}
.remove {float: left;width: 24%;height: 510px;}
script:
<script src="/AppCms/CommonJs/jquery-1.8.2.min.js"></script>
<script src="/web/resource/js/common/jquery.fileupload.js"></script>
<script>
// =========================================拖拽事件==============================
var removeDom;
var G_step = 0;
//拖放开始：获取id放⼊dataTransfer
$(".add_line input").on("dragstart", function(e) {
});
//允许放⼊
$("#left").on("dragover", function(e) {
})
//允许放⼊
$("#remove").on("dragover", function(e) {
})
//放下事件
$("#left").on("drop", function(e) {
var value = e.Data("value");
var name = e.Data("name");
var html = '';
if (!value) {
return false
};
if (name == 'title') {
var title_length = $(".add-part[data-type=title]").length;
html = '<h5 data-num="' + title_length + '">' + value + '</h5>';
$('input[name=title]').val('');
}
if (name == 'text') {
html = "<p>" + value + "</p>";
$('input[name=text]').val('');
}
if (name == 'img') {
js文字动画特效html = "<img draggable='true' src='" + value + "' width='100%' height='auto'>";
$('input[name=img]').val('');
}
if (name == 'video') {
var img_val = $(".input-line input[name=video-img]").val();
html = "<div draggable='true' class='video-mian'><video poster='" + img_val + "' webkit-playsinline='true' x-webkit-airplay='true' playsinline='true' x5-video-player-type='h5' x5-video-player-fullscreen='true' controls=''
style='width:100%; height:100%; object-fit: fill'><source draggable='true' src='" + value + "'></video></div>"; $('input[name=video]').val('');
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论