增加拖拽函数、 热点图片可拖拽

js/edit.js

@@ -1152,13 +1152,13 @@ Hotpoint.prototype.editHot = function(hot, $li) {
     }.bind(this))
 
     var imagesHTML = hot.info.images.map(function(image) {
-        return '<div><a class=" result success" data-type="photo"><span></span><img src="' + image + '" class="bg"></a></div>'
+        return '<div class="mediaItem" draggable="true" ><a class=" result success" data-type="photo"><span></span><img src="' + image + '" class="bg"></a></div>'
     })
 
     var videosHTML = hot.info.video.map(function(ly) {
         var thumb = (!ly.img || ly.img === "undefined") ? '' : '<img src='+ ly.img +' class="bg"></img>'
         var thumbResult = (!ly.img || ly.img === "undefined") ? '' : 'success';
-        var dom = '<div><a class=" result success" data-type="video"><span></span>' + thumb + ' <img class="play-video" videoURL="' + ly.url + '" src="' + playIcon + '"></a>  <span class="upload-thum ' + thumbResult + ' result" attr-thum="' + ly.img + '">上传封面<i><input type="file" accept="image/*"></i></span></div>'
+        var dom = '<div class="mediaItem" draggable="true"><a class=" result success" data-type="video"><span></span>' + thumb + ' <img class="play-video" videoURL="' + ly.url + '" src="' + playIcon + '"></a>  <span class="upload-thum ' + thumbResult + ' result" attr-thum="' + ly.img + '">上传封面<i><input type="file" accept="image/*"></i></span></div>'
         return dom
     })
 
@@ -2471,7 +2471,7 @@ Hotpoint.prototype.addmediaInit = function() {
         var file = this.files[0];
         var type = this.activeElem ? this.activeElem.attr('data-type') : $seft.parent().attr('data-type');
         
-        var $din = $(document.createElement('div'));
+        var $din = $('<div class="mediaItem" draggable="true"></div>')  
         var fnc = type === 'photo' ? imageSuccess : type === 'video' ? videoSuccess : thumbSuccess //再次传都会是thumSuccess
         var $dom = fnc(file, $din, $seft)
 
@@ -3208,62 +3208,24 @@ EditGuide.prototype.init = function(data, data2) {
   
 
     //fyz 拖拽以改变顺序  
-    let tourListNode = $("#tourList>ul")[0];
-    let tourItemListNode = $("#tourItemList>ul")[0];
-    let draging = null;
-    let dragStart = (event)=> {
-        event.dataTransfer.setData("te", event.target.innerText);  //不能使用text，firefox会打开新tab
-        draging = event.target;
-    }
     
-    
-    let dragOver = (event)=>{
-        event.preventDefault();
-        let target = searchParent(event.target, { tagName: 'LI' }, 7);   //event.target.parentNode.parentNode;
+    {
+        let tourListNode = $("#tourList>ul")[0];
+        let tourItemListNode = $("#tourItemList>ul")[0];
+        let callback = function(ul){
+            reIndexTourList(ul)
+            
+        }
          
+         
+        setDraggable({ul:tourListNode,  dragItemClassName:['guideItem', 'listItem'], callback})
+        setDraggable({ul:tourItemListNode,  dragItemClassName:['guideItem'], callback })
         
-        // 判断dragover是否发生在LI元素上
-        if ((target.classList.contains('guideItem') || target.classList.contains('listItem')) && target !== draging ) {
-            let dragingIndex = $(draging).index()//draging.querySelector('#index');
-            let targetIndex = $(target).index()//target.querySelector('#index'); 
-            
-            
-            var targetRect = target.getBoundingClientRect();
-            var dragingRect = draging.getBoundingClientRect();
-            if (target && target.animated) {
-                return;
-            }
-
-            let ulElem = target.parentNode;
-            // 寻找到 ul节点
-            if (getIndex(draging) < getIndex(target)) {
-                //dragingIndex.innerText = [targetIndex.innerText, targetIndex.innerText = dragingIndex.innerText][0];
-                // 交换两个节点的序号
-                
-                if(event.clientY<targetRect.top+targetRect.height*0.3)return
-                ulElem.insertBefore(draging, target.nextSibling);
-                //dragingIndex.innerText = [targetIndex.innerText, targetIndex.innerText = dragingIndex.innerText][0];// 交换两个节点的序号
-                 
-            } else {
-                //dragingIndex.innerText = [targetIndex.innerText, targetIndex.innerText = dragingIndex.innerText][0];
-                if(event.clientY>targetRect.bottom-targetRect.height*0.3)return
-                ulElem.insertBefore(draging, target);
-                //dragingIndex.innerText = [targetIndex.innerText, targetIndex.innerText = dragingIndex.innerText][0];
-            }
-            _animate(dragingRect, draging);
-            _animate(targetRect, target);
-            
-            var ul = searchParent(event.target, { className: 'tourList' })
-            reIndexTourList(ul)
-             
-        } 
+        
+        
+        setDraggable({ul:$('#hotpointDetail [name="video"] .list')[0],  dragItemClassName:['mediaItem'] })
+        setDraggable({ul:$('#hotpointDetail [name="photo"] .list')[0],  dragItemClassName:['mediaItem'] })
     }
-    
-    
-    tourListNode.ondragstart = dragStart
-    tourItemListNode.ondragstart = dragStart 
-    tourListNode.ondragover = dragOver 
-    tourItemListNode.ondragover = dragOver 
      
      
     
@@ -5906,7 +5868,79 @@ class CheckBox extends ButtonBase{
 }
 
 
+function setDraggable(o={}){ 
+    let findTarget = (event)=>{
+        let target; 
+        for(let name of o.dragItemClassName){
+            let tar = searchParent(event.target, { className: name }, o.maxDepth || 7); 
+            if(tar){
+                target = tar; break;
+            }
+        }
+        return target
+    }
+    
+    
+    let draging = null;
+    let dragStart = (event)=> {
+        event.dataTransfer.setData("te", event.target.innerText);  //不能使用text，firefox会打开新tab
+        draging = findTarget(event);
+    }
+    
+    
+    let dragOver = (event)=>{
+        event.preventDefault();
+        
+        
+        let target = findTarget(event); 
+        
+ 
+        
+        // 判断dragover是否发生在LI元素上
+        if (target && target !== draging ) {
+            let dragingIndex = $(draging).index()//draging.querySelector('#index');
+            let targetIndex = $(target).index()//target.querySelector('#index'); 
+            
+            
+            var targetRect = target.getBoundingClientRect();
+            var dragingRect = draging.getBoundingClientRect();
+            if (target && target.animated) {
+                return;
+            }
 
+            let ulElem = target.parentNode;
+            // 寻找到 ul节点
+            if (getIndex(draging) < getIndex(target)) {
+                //dragingIndex.innerText = [targetIndex.innerText, targetIndex.innerText = dragingIndex.innerText][0];
+                // 交换两个节点的序号
+                
+                if(event.clientY<targetRect.top+targetRect.height*0.3)return
+                ulElem.insertBefore(draging, target.nextSibling);
+                //dragingIndex.innerText = [targetIndex.innerText, targetIndex.innerText = dragingIndex.innerText][0];// 交换两个节点的序号
+                 
+            } else {
+                //dragingIndex.innerText = [targetIndex.innerText, targetIndex.innerText = dragingIndex.innerText][0];
+                if(event.clientY>targetRect.bottom-targetRect.height*0.3)return
+                ulElem.insertBefore(draging, target);
+                //dragingIndex.innerText = [targetIndex.innerText, targetIndex.innerText = dragingIndex.innerText][0];
+            }
+            _animate(dragingRect, draging);
+            _animate(targetRect, target);
+            
+            
+            o.callback && o.callback(o.ul, target)
+            //var ul = searchParent(event.target, { className: 'tourList' })
+            //reIndexTourList(ul)
+             
+        } 
+    }
+    
+    
+    o.ul.ondragstart = dragStart
+    o.ul.ondragover = dragOver 
+    
+    
+}
 
 
 /* class OnOffSwitch extends CheckBox{

js/main_2020_show.js

@@ -20959,7 +20959,7 @@ window.Modernizr = function(n, e, t) {
             ,
             n.prototype.waitNextStep = function(e, t, time) {//xzw 改时间
                 var i = (time==void 0)? c.warp.tourStepDelay : time;
-                i==void 0 || (i = this.lastTransType === l.BLACK ? b.tourStepDelaySlideShow : b.tourStepDelayDefault);
+                i==void 0 && (i = this.lastTransType === l.BLACK ? b.tourStepDelaySlideShow : b.tourStepDelayDefault);
                 var n = new r.Euler
                   , o = new r.Vector3;
                 y.debug("Starting wait: " + (void 0 !== t));