Zenn
🖥

(未解決) Mac + Ruby + Selenium + Chrome でドラッグ&ドロップが出来ない。カーソル位置でドロップされてしまう

2023/09/01に公開
tech

感想

drag_and_drop ではなく他のメソッドを使ってみても無理で、Seleniumのカーソル移動的な挙動(？)が壊れているかもしれない気がした。

Firefoxではまったくドラッグもドロップも出来なかった。

Ruby

require 'selenium-webdriver'

driver = Selenium::WebDriver.for :chrome
driver.navigate.to "file:///Users/yumainaura/projects/YumaInaura/ruby/drag-and-drop.html"

source = driver.find_element(:id, 'p1')
target = driver.find_element(:id, 'dd1')

driver.action.drag_and_drop(source, target).perform

sleep 3

HTML

<head>
<style>
  #p1,#p2,#p3,#p4,#p5,#p6,#p7,#p8,#p9,#p10,#p11,#p12{
	display: block;
	max-width: 60%;
	min-width: 20%;
	padding: 10px;
	margin: 1px auto;
	border: 1px solid rgba(75,75,75,0.5);
	border-radius: 10px;
}
#dz1,#dz2,#dz3{
	display: block;
	max-width: 60%;
	min-width: 20%;
	padding: 10px;
	margin: 1px auto;
	border: 1px solid rgba(75,75,75,0.5);
}
#dd1,#dd2,#dd3{
	display: block;
	max-width: 60%;
	min-width: 20%;
	padding: 10px;
	margin: 1px auto;
	border: 1px solid rgba(75,75,75,0.5);
	border-radius: 10px;
}
#dz1{
	background-color: rgba(100,100,100,0.5);
}
#dz2{
	background-color: rgba(125,125,125,0.5);
}
#dz3{
	background-color: rgba(150,150,150,0.5);
}
#dd1{
	background-color: rgba(100,100,100,0.5);
}
#dd2{
	background-color: rgba(125,125,125,0.5);
}
#dd3{
	background-color: rgba(150,150,150,0.5);
}
#p1,#p4,#p7,#p10{
	background-color: rgba(75,175,175,0.5);
}
#p2,#p5,#p8,#p11{
	background-color: rgba(175,175,75,0.5);
}
#p3,#p6,#p9,#p12{
	background-color: rgba(175,75,175,0.5);
}
</style>
<script>



  function dragstart_handler(ev) {
    // Set the drag effect to copy
    ev.dataTransfer.dropEffect = "copy";
    // Log Start
      //console.log("dragStart");
    // Add the target element's id to the data transfer object
    ev.dataTransfer.setData("text/plain", ev.target.id);
    // Set data
    ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
    ev.dataTransfer.setData("text/uri-list", "https://developer.mozilla.org");
    console.log("This = ");
    console.dir(this);
  }

  function dragover_handler(ev) {
    ev.preventDefault();
    // Set the dropEffect to move
    ev.dataTransfer.dropEffect = "move"
  }

  function drop_handler(ev) {
    ev.preventDefault();
    console.dir(ev);
    console.dir(ev.target.parentElement);
    if(ev.target.className === "droppable"){
      // Get the id of the target and add the moved element to the target's DOM
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
    } else if(ev.target.parentElement.className === "droppable"){
      // Get the id of the target and add the moved element to the target's DOM
      var data = ev.dataTransfer.getData("text");
      console.dir(ev.dataTransfer);
      //ev.target.parentElement.appendChild(document.getElementById(data));
      ev.target.parentElement.insertBefore(document.getElementById(data), ev.target.nextSibling);
    }

  }
    </script>
</head>

<body class="droppable" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">

  <div id="dz1" class="droppable" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
    <p>Drop Zone 1</p>
  </div>
  <div id="dz2" class="droppable" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
    <p>Drop Zone 2</p>
  </div>
  <div id="dz3" class="droppable" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
    <p>Drop Zone 3</p>
  </div>/
  <div id="dd1" draggable="true" class="droppable" ondragstart="dragstart_handler(event);" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
    <p>Drag/Drop Zone 1</p>
  </div>
  <div id="dd2" draggable="true" class="droppable" ondragstart="dragstart_handler(event);" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
    <p>Drag/Drop Zone 2</p>
  </div>
  <div id="dd3" draggable="true" class="droppable" ondragstart="dragstart_handler(event);" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
    <p>Drag/Drop Zone 3</p>
  </div>

  <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
  <p id="p2" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
  <p id="p3" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
  <p id="p4" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
  <p id="p5" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
  <p id="p6" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
  <p id="p7" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
  <p id="p8" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
  <p id="p9" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
  <p id="p10" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
  <p id="p11" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
  <p id="p12" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
</body>

ソースはこちらのまま

https://codepen.io/Goldfsh/pen/zBbOqm

結果

エレメント指定した先ではなく現在のカーソル位置にドロップされてしまう。

image.png

バージョン

  • ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-darwin19]
  • selenium-webdriver (4.4.0)

参考

https://qiita.com/motoya0118/questions/efb3b3e56dd70dd9cd69#answer-6d8714520e3f69d7d57b

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2022-09-28

Discussion