HTML5拖放实例

Posted 2021-04-04 前端开发学习和交流

在H5标准中，一切元素都可以拖放（Drag和drop）。

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释：在 Safari 5.1.2 中不支持拖放。

需求： 把组件库中的组件拖拽到目标元素中，拖拽到目标元素中的组件可以删除，可以配置信息。如果目标元素中已经有组件，则把它替换成当前拖拽的拖放元素。组件可重复。点击保存按钮，可以保存目标元素中的组件和配置信息，下次打开页面时可以回显组件、组件位置和组件配置信息。

拖拽之前：

拖拽之后：

HTML部分：

<!--2个目标元素--><div id="editor1" class="droppable"></div><div id="editor2" class="droppable"></div><!--2个拖放元素，设置元素为可拖放，添加 draggable="true"--><div class="draggable" id="co2" draggable="true"> <div class="item_title"> <span class="item_text">公众效益</span> <span class="editIcon">&bull;&bull;&bull;</span> <div class="btnConf"> <a href="javascript:;" class="deleteComponent">删除</a> <a href="javascript:;" class="confComponent" data-id="co2">配置</a> </div> </div> <div class="co2_content"></div></div><div class="draggable" id="videoMonitor" draggable="true"> <div class="item_title"> <span class="item_text">视频监控</span> <span class="editIcon">&bull;&bull;&bull;</span> <div class="btnConf"> <a href="javascript:;" class="deleteComponent">删除</a> <a href="javascript:;" class="confComponent" data-id="videoMonitor">配置</a> </div> </div> <div class="item_content"></div></div><button id="saveBtn">保存</button>

JS部分：

先声明一个对象，可以保存2个目标元素的上的组件唯一标识和组件配置信息，点击保存按钮时就保存这个对象。

//目标元素id:{'component':组件id,'data':配置信息}var editorData = {    'editor1':{'component':'','data':{}},    'editor2':{'component':'','data':{}}};

给拖放元素添加dragstart、dragend监听事件

$(".draggable").bind('dragstart',function(e){//当鼠标点中元素并且开始移动时    $(this).addClass('dragging');//添加拖拽中的样式    e.originalEvent.dataTransfer.setData('text',e.target.id);//设置被拖数据的数据类型和值});$(".draggable").bind('dragend',function(e){//松开鼠标取消拖拽时    $(this).removeClass('dragging');//删除拖拽中的样式});

给目标元素添加监听事件

$(".droppable").bind('dragenter',function(e){//拖拽元素到目标上 e.originalEvent.stopPropagation();    e.originalEvent.preventDefault();    $(this).addClass('drag-over');//给目标元素添加样式});$(".droppable").bind('dragleave',function(e){//离开目标元素 $(this).removeClass('drag-over');//删除目标元素样式});$(".droppable").bind('dragover',function(e){//当拖动元素在目标元素中，就会持续触发dragover事件 e.originalEvent.stopPropagation(); e.originalEvent.preventDefault();});

若拖放元素到了目标元素中（在目标元素中松开鼠标），就会触发drop事件而不会触发dragleave事件。

$(".droppable").bind('drop',function(e){ e.originalEvent.stopPropagation(); e.originalEvent.preventDefault();//避免浏览器对数据的默认处理（drop事件的默认行为是以链接形式打开） $(this).removeClass('drag-over'); var editorNum = $(this).attr('id'); var idStr = e.originalEvent.dataTransfer.getData('text');//获得被拖的数据 //把被拖元素追加到放置元素（目标元素）中    var node = $('#'+idStr).clone(true); $(this).empty(); $(this).append(node.html());    $(this).find('.editIcon').show();//显示组件右上角3个点    editorData[editorNum]['component'] = idStr; editorData[editorNum]['data'] = {};});

拖拽拖放元素到目标元素后

//点击右上角3个点可以打开菜单$(document).on('click','.droppable .editIcon', function (e) { $(this).next('.btnConf').fadeToggle();});

点击拖放元素上的删除按钮

//点击删除菜单$(document).on("click",'.droppable .deleteComponent',function (e) { $(this).parent('.btnConf').fadeToggle(); var editorNum = $(this).parents('.droppable').attr('id'); editorData[editorNum]['data'] = {}; switch(editorData[editorNum]['component']){ case 'co2': $('#valueFirst').val(''); break; case 'videoMonitor': $('#videoMonitorURL').val(''); break; } editorData[editorNum]['component'] = '';    $(this).parents('.droppable').empty();});

点击拖放元素上的配置按钮

//点击配置菜单$(document).on("click", '.droppable .confComponent',function () { $(this).parent('.btnConf').fadeToggle(); var editorNum = $(this).parents('.droppable').attr('id'); var dataId = $(this).attr('data-id'); switch(dataId){ case 'co2':            //弹出co2配置弹框，传editorNum break; case 'videoMonitor': //弹出videoMonitor配置弹框，传editorNum break; }});

保存配置弹框

var valueFirst = $('#valueFirst').val();editorData[editorNum]['data'] = {'valueFirst':valueFirst};

var videoMonitorURL = $('#videoMonitorURL').val();editorData[editorNum]['data'] = {'videoMonitorURL':videoMonitorURL};

回显组件的拖拽和配置

var editorData = { 'editor1':{'component':'','data':{}}, 'editor2':{'component':'','data':{}}};//data是后台返回的数据，形式和editorData一样for(var i in data){  switch(data[i].component){ case 'co2': $('#valueFirst').val(data[i]['data']['valueFirst']); break; case 'videoMonitor': $("#"+i).find('.video1 source').attr('src',data[i]['data']['videoMonitorURL']);          $('#videoMonitorURL').val(data[i]['data']['videoMonitorURL']); break;   }   editorData[i] = data[i];}