energye/energy

不支持H5的drag/drop？

wflashy opened this issue · 3 comments

wflashy commented

浏览器测试：正常

default.mov

energy2.4.4 测试 ：被禁止放置

default.mov

测试的HTML：
`

 
 
 
 
 
  <title>Draggable List</title>
  <style>
  ul {
  list-style: none;
  padding: 0;
  margin: 0;
  }
  li {
  padding: 10px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  cursor: move; /* Indicates this is a draggable item */
  }
  </style>
 
 
   
 
     
  • Item 1
    		•
     
  • Item 2
    		•
     
  • Item 3
    		•
     
  • Item 4
    		•
     
  • Item 5
    		•
     
       
      <script>
      // 获取列表和列表项
      const list = document.getElementById('draggable-list');
      const items = list.querySelectorAll('li');
       
      // 为每个列表项添加事件监听器
      items.forEach(item => {
      item.addEventListener('dragstart', handleDragStart);
      item.addEventListener('dragover', handleDragOver);
      item.addEventListener('dragend', handleDragEnd);
      item.addEventListener('drop', handleDrop);
      });
       
      let draggedItem = null;
       
      function handleDragStart(e) {
      // 将被拖拽的元素存储在变量中
      draggedItem = this;
      // 显示拖拽效果
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/html', this.innerHTML);
      }
       
      function handleDragOver(e) {
      // 允许放置
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
      }
       
      function handleDragEnd(e) {
      // 清除被拖拽的元素
      draggedItem = null;
      }
       
      function handleDrop(e) {
      // 阻止默认行为
      e.stopPropagation();
      e.preventDefault();
      // 获取放置位置的元素
      const dropTarget = e.target.closest('li');
      // 如果没有放置目标，或者放置目标是被拖拽的元素，则退出
      if (!dropTarget || dropTarget === draggedItem) return;
      // 移动元素
      list.insertBefore(draggedItem, dropTarget);
      }
      </script>
       
     
     

    `

    wflashy commented 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable List</title>
<style>
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  li {
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    cursor: move; /* Indicates this is a draggable item */
  }
</style>
</head>
<body>

<ul id="draggable-list">
  <li draggable="true">Item 1</li>
  <li draggable="true">Item 2</li>
  <li draggable="true">Item 3</li>
  <li draggable="true">Item 4</li>
  <li draggable="true">Item 5</li>
</ul>

<script>
// 获取列表和列表项
const list = document.getElementById('draggable-list');
const items = list.querySelectorAll('li');

// 为每个列表项添加事件监听器
items.forEach(item => {
  item.addEventListener('dragstart', handleDragStart);
  item.addEventListener('dragover', handleDragOver);
  item.addEventListener('dragend', handleDragEnd);
  item.addEventListener('drop', handleDrop);
});

let draggedItem = null;

function handleDragStart(e) {
  // 将被拖拽的元素存储在变量中
  draggedItem = this;
  // 显示拖拽效果
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}

function handleDragOver(e) {
  // 允许放置
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
}

function handleDragEnd(e) {
  // 清除被拖拽的元素
  draggedItem = null;
}

function handleDrop(e) {
  // 阻止默认行为
  e.stopPropagation();
  e.preventDefault();
  // 获取放置位置的元素
  const dropTarget = e.target.closest('li');
  // 如果没有放置目标，或者放置目标是被拖拽的元素，则退出
  if (!dropTarget || dropTarget === draggedItem) return;
  // 移动元素
  list.insertBefore(draggedItem, dropTarget);
}
</script>

</body>
</html>
    sxmxta commented

    It is possible to implement drag-and-drop functionality.

    Reason: Unlike CEF and browsers, browsers have already implemented most of the features used by most users. CEF, however, is more geared towards developers. Some features in CEF are not fully implemented like they are in browsers, and we need to implement them ourselves through the CEF API.

    This allows us to have more flexibility in controlling the browser to implement custom features.

    Your problem is solved by implementing the SetOnDragEnter callback event

    SetOnDragEnter :

    	cef.BrowserWindow.SetBrowserInit(func(event *cef.BrowserEvent, window cef.IBrowserWindow) {
		event.SetOnDragEnter(func(sender lcl.IObject, browser *cef.ICefBrowser, dragData *cef.ICefDragData, mask consts.TCefDragOperations, window cef.IBrowserWindow, result *bool) {
			// mask is const
			if mask == consts.DRAG_OPERATION_MOVE {
				*result = false // can drag
			} else {
				*result = true
			}
		})
	})