11489 sujets

JavaScript, DOM et API Web HTML5

[HTML5] Drag&Drop et Input

Bonjour,

Je suis entrain de développer une page html dans laquelle je souhaite déplacer des divs, je me suis basé sur ce site :ici

Le drag&drop fonctionne nikel.

J'ai ensuite voulu ajouter des Input type text dans ces div et c'est la que le problème arrive.
Le clic pour rentrer en édition sur les imputs ne fonctionne plus ( je suppose que le drag pour une raison que je ne comprend pas prend le dessus), seul le double clic rentre en édition ...

Je vous joint ma page de test.
Merci pour votre aide !


<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
	<meta http-equiv="MSThemeCompatible" content="no" />
    <meta http-equiv="PRAGMA" content="NO-CACHE" />
    <title>Startup</title>

</head>
<body>
<div id="columns">
  <div class="column" draggable="true"><header>A</header><input type="text" /></div>
  <div class="column" draggable="true"><header>B</header><input type="text" /></div>
  <div class="column" draggable="true"><header>C</header><input type="text" /></div>
</div>
</body>
<script type="text/javascript">
var dragSrcEl = null;

function handleDragStart(e) {

  
  e.dataTransfer.effectAllowed = 'move';
  //e.dataTransfer.setData('text', this.outerHTML);

  dragSrcEl = this;

  this.classList.add('moving');
  
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }

  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

  return false;
}

function handleDragEnter(e) {
  // this / e.target is the current hover target.
  this.classList.add('over');
}

function handleDrop(e) {
  // this/e.target is current target element.

	if (e.stopPropagation) {
	e.stopPropagation(); // Stops some browsers from redirecting.
	}

	// Don't do anything if dropping the same column we're dragging.
	if (dragSrcEl != this)   {
		// Set the source column's HTML to the HTML of the column we dropped on.
		//dragSrcEl.innerHTML = this.innerHTML;
		//this.innerHTML = e.dataTransfer.getData('text');
		
		

		this.parentNode.insertBefore(dragSrcEl, this);


	}

  return false;
}
function handleDragEnd(e) {
  // this/e.target is the source node.

  [].forEach.call(cols, function (col) {
    col.classList.remove('over');
	col.classList.remove('moving');
  });
}

function handleDragLeave(e) {
  this.classList.remove('over');  // this / e.target is previous target element.
}

var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
	col.setAttribute('draggable', 'true');
	col.addEventListener('dragstart', handleDragStart, false);
	col.addEventListener('dragenter', handleDragEnter, false)
	col.addEventListener('dragover', handleDragOver, false);
	col.addEventListener('dragleave', handleDragLeave, false);
	col.addEventListener('drop', handleDrop, false);
	col.addEventListener('dragend', handleDragEnd, false);
});
</script>
</html>
<style>
/* Prevent the text contents of draggable elements from being selectable. */
[ draggable ] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select:none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
.column {
  height: 150px;
  width: 150px;
  float: left;
  border: 2px solid #666666;
  background-color: #ccc;
  margin-right: 5px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 3px #000;
  -ms-box-shadow: inset 0 0 3px #000;
  box-shadow: inset 0 0 3px #000;
  text-align: center;
  cursor: move;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  -moz-transition: -moz-transform 0.2s ease-out;
  -o-transition: -o-transform 0.2s ease-out;
  -ms-transition: -ms-transform 0.2s ease-out;
  transition: all 0.2s ease-out;
}

	.column.moving {
		opacity: 0.25;
		-webkit-transform: scale(0.8);
		-moz-transform: scale(0.8);
		-ms-transform: scale(0.8);
		-o-transform: scale(0.8);
		transform: scale(0.8);
	}

.column header {
  color: #fff;
  text-shadow: #000 0 1px;
  box-shadow: 5px;
  padding: 5px;
  background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -webkit-gradient(linear, left top, right top,
                               color-stop(0, rgb(0,0,0)),
                               color-stop(0.50, rgb(79,79,79)),
                               color-stop(1, rgb(21,21,21)));
  background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: linear-gradient( to left, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));

  border-bottom: 1px solid #ddd;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -ms-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -ms-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  border-top-right-radius: 10px;
}
.column.over {
  border: 2px dashed #000;
}
</style>

Modifié par Geff33 (19 Mar 2014 - 10:33)
Sujet clos
Aller à