1 Replies - 192 Views - Last Post: 31 August 2018 - 08:40 AM

#1 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6796
  • View blog
  • Posts: 28,083
  • Joined: 12-December 12

jQuery draggable failing

Posted 31 August 2018 - 06:44 AM

My jQuery drag and drop feature was working perfectly. There is an outline for the paragraph being dragged, the icon is 'grabbed', and there is no problem dragging and dropping the draggable paragraphs from one div to another. The paragraphs are cloned.

Now, after changes, suddenly it isn't working. It takes several attempts to drag an element, if at all; I have to move it quickly and there is no outline (or grabbed icon). No errors in the console.

Essentially, my HTML is two divs with one containing paragraphs. I am dragging from one box to the second.
(There are two other boxes that could be dragged TO, but there is otherwise no dragging BACK or between different boxes.) Basically, I can drag from a bigger box on the left to one of three boxes on the right.

Some code below.

1. There are a lot of draggable paragraphs, 100+, but this is also the case in the earlier working version. I tested by restricting to 10, but no difference.

2. Maybe rendering during drag is an issue. Formerly, the container for the draggables had a fixed height which I removed. I reinstated this fixed height but no difference.

3. Complicated HTML? It is just a div containing an initial h5 element and the draggable paragraphs, which each contain a few attributes and simple text content.

4. A change I had made was to add some additional data-attributes to the paragraphs. I tested by removing these to no difference.

5. When a draggable is dropped I colour the original element. I tested by removing this functionality to no avail. (It only happens after 'drop' anyway.)

I am at a loss and would really appreciate suggestions as to how I could pursue this further.

            $("p", $documentsBox).draggable({
                helper: 'clone',
                opacity: 0.7,
                appendTo: $mainComponent.attr('id'),
                cursor: 'grabbing'
            });



            $focusBox.add($fundamentalBox).add($macroBox).droppable({
                accept: '.draggable',
                drop: function (event, ui) {
                    var droppable = $(this);
                    var draggable = ui.draggable;

                    // is the publication already in the summary box?
                    var alreadyPresent = droppable.find("[data-docid='" + draggable.attr("data-docid") + "']");
                    if (alreadyPresent.length > 0) {
                        $message.text('Publication already included in summary.');
                        $message.css('visibility', 'visible');
                        return;     // abandon the drop
                    }
                    var dropped = draggable.clone().appendTo(droppable);

                    // mark the original document as 'in use'
                    draggable.addClass("text-muted");

                    var $buttons = $("<span class='text-muted'/>");
                    $buttons.append("<span class='removedoc glyphicon glyphicon-remove' title='remove'></span>");
                    $buttons.append("<span class='updoc glyphicon glyphicon-arrow-up' title='move up'></span>");
                    $buttons.append("<span class='downdoc glyphicon glyphicon-arrow-down' title='move down'></span>");
                    $buttons.append("<span class='editdoc glyphicon glyphicon-pencil' title='edit compendium'></span>");
                    dropped.append($buttons);
                }
            });


Is This A Good Question/Topic? 0
  • +

Replies To: jQuery draggable failing

#2 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6796
  • View blog
  • Posts: 28,083
  • Joined: 12-December 12

Re: jQuery draggable failing

Posted 31 August 2018 - 08:40 AM

Finally fixed this after much frustration!

Needing to add and adjust some HTML triggered a slight change in behaviour which lead me towards the solution.

appendTo: $mainComponent.attr('id'),

This is appending the cloned element. By appending it to the draggable's container it is probably causing multiple re-rendering/ rendering issues, but no errors.

appendTo: 'body',

Fixed it.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1