Rahul
Rahul

Reputation: 137

Stop drag event during click a link

i have drag event over a div.image attached. enter image description here

when i mouse down on div the drag event start.for this i include nestable.js plugin.i want to stop drag event of div during click on links of div .i am using js and html file from link: Nestable

Please give the solution,how can i do it.

Upvotes: 6

Views: 7502

Answers (5)

Gheorghe Puzur
Gheorghe Puzur

Reputation: 21

<div class="dd-handle">
ID - Title <a href="#" class="dd-nodrag link_min">Link</a>

.link_min{
  position: absolute;
  display: inline-block;
  right: 0px;
  margin-right: 8px;
}

Upvotes: 2

gihan-maduranga
gihan-maduranga

Reputation: 4811

You can disable this using custom CSS class.

.disableDrag{
  display: block;
  margin: 5px 0;
  padding: 6px 10px 8px 40px;
  font-size: 15px;
  color: #333333;
  text-decoration: none;
  border: 1px solid #cfcfcf;
  background: #fbfbfb;
}

Use created CSS class on item where you want to disable.

Working example JSFiddle

<li class="dd-item"> <div class="disableDrag"><em class="badge pull-right"></em></div> </li>

Upvotes: 0

mrcyborg
mrcyborg

Reputation: 191

To ignore handling on click, add "dd-nodrag" class to element.

Upvotes: 18

Viktor Sanzharevskyy
Viktor Sanzharevskyy

Reputation: 451

author has a problem with nestable plugin. there is some better way to solve the problem of link click that is placed in the nestable container:

$(".dd a").on("mousedown", function(event) { // mousedown prevent nestable click
    event.preventDefault();
    return false;
});

$(".dd a").on("click", function(event) { // click event
    event.preventDefault();
    window.location = $(this).attr("href");
    return false;
});

.dd - default nestable container class, change it if you need

Upvotes: 5

Arun P Johny
Arun P Johny

Reputation: 388416

You need to prevent the propagation of click event from the link element

Ex:

$('#div').on('click', 'a', function(){
    return false;
})

Upvotes: 2

Related Questions