036.xhtml - mozsearch

Enable keyboard shortcuts

<?xml version="1.0" encoding="utf-8"?>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Drag feedback when multiple elements are added to dragstore</title>

<style type="text/css">

div > div

  {height:100px;

  width:100px;

  float:left;

  background-color:navy;}

div + div

  {margin-left:-60px;

  background-color:maroon;}

div[draggable]

  {background-color:teal;

  margin-top:50px;}

</style>

<script type="application/ecmascript">

function start(event)

  {var div = document.querySelectorAll('div > div:nth-child(odd)');

  event.dataTransfer.effectAllowed = 'copy';

  for(var i = 0; i != div.length; i++)

    {event.dataTransfer.addElement(div[i]);}

</script>

</head>

<body>

<p>Try to drag green box below. Feedback overlay should include all three boxes when you drag green one.</p>

<div ondragstart="start(event)">

  <div/>

  <div draggable="true"/>

  <div/>

</div>

</body>

</html>