Propagate javascript event

Question

Propagate javascript event

Navigation

#1 by (3 votes)

2

When I drag the block but clicking on the image of the div, it is the image that is dragged and not the whole block (and therefore the drop does not work), I want that when the image is dragged the event propagates and it is the whole div that is dragged, this is the HTML code:

<div class="item" id="i1">
    <img src="img/camiseta1.jpg" alt="descripción i1"/>
    <label class="title">Camiseta 1</label>
    <label class="price">20 €</label>
    <label class="stock">Stock 10</label>
</div>

This is Javascript

var producto = document.getElementById('i1');
producto.draggable = true;
producto.addEventListener("dragstart", drag);

javascript

asked by Dalfageme 05.03.2017 в 22:53

source

1 answer

Refresh Select2 Jquery Implement C # style flags in C ++

score 3 · Accepted Answer

It is enough that you get a handler to the image, and you give it attribute draggable = false . With that, dredging the shirt drags all the div.

var drag=function() {
  console.log('empezó el drag');
};

var producto = document.getElementById('i1');
producto.draggable = true;
producto.addEventListener("dragstart", drag);

var camiseta = document.getElementById('camiseta1');
camiseta.draggable = false;

.item {
border:1px solid green;
text-align:center;
float:left;
}
.item img {
width:150px;
height:150px;
float:left;
display:inline-block;
}

<div class="item" id="i1">
    <img id="camiseta1"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Naranja-Caballo-al-estilo-de-dibujos-animados-Camisetas-ninos.png/220px-Naranja-Caballo-al-estilo-de-dibujos-animados-Camisetas-ninos.png" alt="descripción i1"/>
    <label class="title">Camiseta 1</label>
    <label class="price">20 €</label>
    <label class="stock">Stock 10</label>
</div>