Member Avatar for hiren_1
hiren_1 0 Newbie Poster

i have two exrcise jsfiddle.net/Er2Ef/10 jsfiddle.net/Er2Ef/11 and i have common js file for above two exrcise and i am going to run this exrcise on one html page that is seems like this fiddle jsfiddle.net/Er2Ef/9 so how can i run this two ercise in one page and my real problem is in this image screencast.com/t/Vimi7Zjb2lkc i dont want to blink and accept the value which are not related to element hope you will help me soon

  • 1 Contributor
  • 0 Replies
  • 132 Views

Dani AI

Generated

— scope each cart instance and make the droppable decide at run‑time whether the dragged item actually belongs to that cart. Tag the source container on dragstart, use a droppable accept function that checks that tag, and validate again in drop before changing state. That prevents the “blink” highlight and accidental accepts when multiple parent containers share the same class names or when you run two exercises on one page.

Example pattern (init one cart per container):

function initCart($container) {
  var id = $container.attr('id');

  $container.find('.item').draggable({
    helper: 'clone',
    revert: 'invalid',
    start: function() {
      $(this).data('origin', $(this).closest('[data-group]').attr('data-group') || id);
    }
  });

  $container.find('.cart').droppable({
    accept: function(draggable) {
      return $(draggable).data('origin') === id;
    },
    tolerance: 'pointer',
    hoverClass: 'cart-hover',
    drop: function(e, ui) {
      if ($(ui.draggable).data('origin') !== id) return;
      // safe: handle the drop (append clone, update totals, etc.)
    }
  });
}

Practical tips:

  • Use helper: 'clone' so the original element isn’t moved mid‑drag (reduces flicker).
  • Store a small origin flag on dragstart instead of relying on DOM traversal during accept.
  • Try tolerance: 'pointer' or intersect to change when a droppable activates; use greedy: true for nested droppables to avoid bubbling.
  • When using one common JS file for multiple instances, avoid global selectors. Call an init function for each wrapper, namespace events (e.g., .on('dragstart.cart1', ...)) and avoid duplicate IDs.

This pattern isolates each exercise, stops unrelated items from being accepted, and eliminates the blink/flash caused by ambiguous selectors or reparenting during drag.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.