Jquery UI Sortable Placeholder Issue in Release 0.3

I am stuck in  a bug in Mozilla Appmaker project. When user drags and drops a brick, in line 12, it will insert a highlighted placeholder to show its target position where the brick would be dropped. The following function implements the drag and drop feature:

          function createSortable() {
            var draggedOff = false;

            $(that).sortable({
              distance : 10,
              handle: '.handle',
              appendTo : "body",
              helper : 'clone',
              connectWith : ".ceci-card",
              placeholder: {
                element: function(clone, ui) {
                  return $("<div class='sortable-placeholder'></div>");
                },
                update: function() {
                  return;
                }
              },
              start : function(){
                that.async(function() {
                  window.dispatchEvent(new CustomEvent('CeciElementSortStarted', {bubbles: true}));
                });
              },
              stop: function(ev, ui) {
                that.async(function() {
                  document.dispatchEvent(new CustomEvent('CeciElementsSorted', {bubbles: true, detail: ui.item[0]}));
                });
              }
            });
          }

It works fine in one single card; However, if you have 3 cards or more, and you want to drop the brick from card a (page a) to card b (page b). Before you drop the brick, the placeholder isn’t attached to card b as expected. It seems that the placeholder would randomly be attached to one of the available cards (a, b, or c). That’s a big problem as user couldn’t control the drop position. If you really want to drop it to card b for example, you have to hover card b tab, then hover card b phone container, the placeholder would show up on card b, after that you can drop the brick to card b. I am still working on this issue, and I hope this bug is not caused by JQuery UI library. Otherwise, that’s really time consuming.
Capture

Advertisements
This entry was posted in open-source. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s