Home/ Questions/Q 303791
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T07:13:15+00:00

The problem I have is that whenever I try to drag and drop with

  • 0

The problem I have is that whenever I try to drag and drop with a handle, in the process of drag and drop, the body text will not stay aligned with the text, which is illustrated in the code attached at the end.

The reason why I prefer not to put the handle in the <p> tags, as some of the examples on the web shows, is that i would like to allow user to in place edit the stuff between the p tags, therefore i don’t want to go and do a lot of pre processing (i may add more stuff around the p tags) before displaying the form.

If anyone can shed some light on this matter, it would be greatly appreciated!

Code, using Google CDN, so it should just work:

<head>
    <style type="text/css">
    #container{
        width:500;
    }
    .handle{
        float:left;
    }
    .
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#container').sortable({
            revert:true,
            handle:'.handle',
        });
    });
    </script>
</head>
<div id="container">
<div class="c"><span class="handle">HH</span><p>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>

<div class="c"><span class="handle">HH</span><p>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is that when the div is dragged to do the sorting, jQuery effectively set’s the draggable (so div.c in your case) to be absolutely positioned (so it can move it around the screen). Not sure about the exact CSS quirks (maybe someone wiser than I can explain more fully), but basically your floating .handle acts a bit strangely in conjunction with the p when inside an absolutely positioned container. The margins on the p now appear to be set from the inside of div rather than merging with them, while the span is still floating to the top left of the div.

    One solution is to add the same top margin to the span as to the p, but only while its dragging. In other words add the following CSS (I think 1em should be the default margin applied to the top of the p):

    .ui-sortable-helper .handle {
    margin-top: 1em;
}

    If you are interested in delving more into the CSS, add the following to your above code & you’ll reproduce the problem without needing the sortables involved:

    .c { width: 500px; height: 40px; position: absolute; }
    • 0