item sometimes sticks to mouse pointer after click

[Pimnr47]

Hi,

I just followed the basic example, but added some bootstrap (please igone the php in my template):

<div class="clear"></div>
<div class="row">
<!-- START widget grid view - TODO Put in a widget grid view from here:  -->
      <div class="muuri-grid col-xs-12">
        <?php foreach ($widgets as $widget) : ?>
          <!-- START widget view - TODO Put in widgetview from here: -->
          <div class="muuri-item col-lg-4 col-md-6 col-sm-6 col-xs-12">
            <div class="muuri-item-content">
              <div class="x_panel">
                <div class="x_title">
                  <h2> <?= $widget->getWidgetImplementationInstance()->getTitle(); ?> </h2>
                  <ul class="nav navbar-right">
                    <li><span class="glyphicon glyphicon-cog" aria-hidden="true" data-toggle="modal" data-target="#editWidget<?= $widget->get_id(); ?>Modal"></span></li>
                  </ul>
                  <div class="clearfix"></div>
                </div>
                <div class="x_content">
                  <?= $widget->getWidgetImplementationInstance()->getWidgetView(); ?>
                </div>
              </div>
            </div>
          </div>
          <!-- END widget view -->
        <?php endforeach; ?>
      </div>
    </div>
    <?php foreach ($widgets as $widget) : ?>
      <div class="modal fade widgetsettingsmodal" id="editWidget<?= $widget->get_id(); ?>Modal" tabindex="-1" role="dialog" aria-labelledby="editWidget<?= $widget->get_id(); ?>ModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="editWidget<?= $widget->get_id(); ?>ModalLabel"><?= lang('widgets_settingsfor') ?><?= $widget->getWidgetImplementationInstance()->getTitle(); ?></h4>
            </div>
            <div class="modal-body">
              <?= $widget->getWidgetImplementationInstance()->getEditSettingsFormView(); ?>
              <br/>
              <div class="alert alert-danger" style="display:none;" role="alert">
                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                <span class="sr-only">Error:</span>
                <div class="validation-error-messages">

                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal"><?= lang('system_cancel') ?></button>
              <button type="button" class="btn btn-primary"><?= lang('system_save') ?></button>
            </div>
          </div>
        </div>
      </div>
    <?php endforeach; ?>
    <!-- END of widget grid view -->
  </div>
</div>

As for the CSS:

.muuri-grid {
    position: relative;
}

.muuri-item {
    display: block;
    position: absolute;
    z-index: 1;
}

.muuri-item.muuri-item-dragging {
    z-index: 3;
}

.muuri-item.muuri-item-releasing {
    z-index: 2;
}

.muuri-item.muuri-item-hidden {
    z-index: 0;
}

.muuri-item-content {
    position: relative;
    width: 100%;
    height: 100%;
}

Script:

var grid = new Muuri('.muuri-grid', {
        dragEnabled: true,
    });

That's all. Seems to work great, except...

Problem I experience is that sometimes after I click an item, it sticks to my mouse pointer as if I am dragging it. This also happens sometimes when I open a bootstrap modal from my item (button on my item that opens bootstrap modal), then the itme still follows my mouse pointer around while the modal is layed over the page. It's a pity, and I don't know why this happens. It also happens sometimes, not always. Any idea why?

[niklasramo]

@Pimnr47 sorry mate, no idea why 😕 Could there maybe be some error happening? I guess you have already checked the console and made sure there are no errors when this is happening?

[NikitaIT]

@Pimnr47 @niklasramo this looks like a common mistake familiar to everyone by this behavior: this is due to the fact that mouse down does not occur or does not occur on the element on which we are listening (popup, iframe, etc)

[niklasramo]

@NikitaIT interesting, do you feel like this is something that Muuri should handle automatically?

[AjayKumar-CO]

Hi @NikitaIT I am facing the issue you explained with iframe, any help to get rid of that problem will be appreciated, because I've been banging my head against the wall from last two days, finding solution to this problem but didn't get anywhere. And thank you very much in advance :)

[SuperiorJT]

Having this same issue specifically with the MacBook track pad using tap gestures instead of clicks. Grid items with click events will work properly unless the cursor goes out of context (opening a new tab, context menu, etc.). The click events will trigger, but it looks like pointer events are simultaneously triggering the Dragger. The item is stuck on the cursor until I click or tap the trackpad.

Everything works fine if I disable tap to click on MacOS. I tried removing events on the element in the browser and the only one that would prevent the item from sticking when removed is pointerdown. This, unfortunately, prevents dragging from working at all.

I tried to work around this by temporarily skipping the pointerdown event via stopPropagation in a temporary listener applied in the click event. This worked, but I wouldn't be able to drag the item again until I clicked somewhere in the viewport. Manually dispatching a pointerup event did not fix that issue.

If anybody knows a solution for this, I'd love to hear it. I'm not sure if the HTML5 drag and drop API has a similar issue...

[sharan-lenovo]

Having this same issue specifically with the MacBook track pad using tap gestures instead of clicks. Grid items with click events will work properly unless the cursor goes out of context (opening a new tab, context menu, etc.). The click events will trigger, but it looks like pointer events are simultaneously triggering the Dragger. The item is stuck on the cursor until I click or tap the trackpad.

Everything works fine if I disable tap to click on MacOS. I tried removing events on the element in the browser and the only one that would prevent the item from sticking when removed is pointerdown. This, unfortunately, prevents dragging from working at all.

I tried to work around this by temporarily skipping the pointerdown event via stopPropagation in a temporary listener applied in the click event. This worked, but I wouldn't be able to drag the item again until I clicked somewhere in the viewport. Manually dispatching a pointerup event did not fix that issue.

If anybody knows a solution for this, I'd love to hear it. I'm not sure if the HTML5 drag and drop API has a similar issue...

@niklasramo I've got the same issue. Is there any fix for this currently?