CODEWITHSUNDEEP
javascriptjqueryhtmldrag-and-dropmouselistener
Mittul At TechnoBrave
Mittul At TechnoBrave

Reputation: 1242

Drag and Drop (Dragger event) prevents onclick

we have used one jquery library called as jesse which works fine

The thing is we have an li attributes and inside it we have used onclick event .. but somehow it stops working and we are unable to call onclick event .. Here is the fiddle for better understanding 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Simple-jQuery-Plugin-For-Drag-Drop-Sorting-Of-Lists-jesse/jquery-jesse.js"></script>


<script type="text/javascript">
  
$(function(){
  
  // removing image onclick close button 
  $("#list").on("click", ".close_product", function (event) {
    console.log('inside onclick function');
    });
  
		$('#list').jesse({
			onStop: function(position, prevPosition, item) {
				console.log('inside list function');
				if(position == 0){
					item.addClass("drop-high").removeClass("drop-small");;
					$( "#list" ).find( "li:nth-child(2)" ).removeClass("drop-high").addClass("drop-small");
				}
				if(prevPosition == 0){
						item.addClass("drop-small").removeClass("drop-high");
					$( "#list" ).find( "li:nth-child(1)" ).removeClass("drop-small").addClass("drop-high");
				
				}
			},
		});
	});
  </script> 
 <ul class="jq-jesse" id="list">
                                  <li class="drop-high"><div class="high"><div class="close close_product">X</div><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/04/1459870313PHP-logo.svg.png" width="20%"></div> </li>
                                  <li class="drop-small"><div class="high"><div class="close close_product">X</div><img src="https://phpwomen.org/holdingpage/images/usergroups/phpne.png" width="20%"></div> </li>
                                  <li class="drop-small"><div class="high"><div class="close close_product">X</div><img src="http://d3gnp09177mxuh.cloudfront.net/tech-page-images/php.png" width="20%"></div></li>
                                  <li class="drop-small"><div class="high"><div class="close close_product">X</div><img src="http://unitedwebsoft.in/blog/wp-content/uploads/2013/07/advantage-of-php.jpg" width="20%"></div></li>
                                
                                </ul>

As you can see above, i have onclick function, but its not working. How can i make it work ?

Upvotes: 1

Views: 1620

Answers (1)

shukshin.ivan
shukshin.ivan

Reputation: 11340

The library doesn't use drag events. It listens to mousedown and if fired it stops default execution with e.preventDefault(); and watches over $(document).on('mousemove') and .on('mouseup').

Therefore closing div can't hear any click event. You can slightly modify the library file to make it identify closing clicks.

  1. Add specific setting, say, closingClass to the class (line 7)

    var settings = $.extend({
    closingClass: 'closing', 
    selector:    'li',
    dragClass:   '_isDragged',
    placeholder: '<li class="jq-jesse__placeholder"></li>'
}, options);

  2. Change listening of clicks at closing divs by adding the following 3 lines:

    list.on('mousedown', settings.selector, function(e){
    if($(e.target).hasClass(settings.closingClass)) {
        return true;
    }

  3. That's it. Now you can't drag using a div having closingClass. You can add their own listeners.

Fiddle with fixed library code.

Upvotes: 2

Related Questions