Question

I’m using two UL’s and scrolling them horizontally using javascript, but they jump about 10-20 px when the list items are dragged between the lists. This happens in chrome, but not in firefox. Problem is, it’s fixed in chrome when setting the UL Li’s to float:left, but that breaks the whole thing in firefox (the list does not stay on one line). Help!

Here’s the web page, please open in webkit/chrome and firefox

http://www.senseculture.com/timeline_new.html

The Code I’m using for the draggable is:

<script>
  $(function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".timeline_content"
        }).disableSelection();
    });
</script>

Answer 1

Seems like an issue where Chrome is treating default css properties differently than Firefox. You can pass an option to Selectable to add a class to the placeholder – that allows you to easily style that placeholder:

$(function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".timeline_content",
            placeholder: "timeline-placeholder"
        }).disableSelection();
    });

The following style (although a bit weird) worked for me:

.timeline-placeholder {
    display:  inline !important;
    padding:  0 99px;
    width:  2px;
}

I generally dislike the need to use !important / limit its use, but default behavior of the placeholder is to be set to display: block which needed to be overriden.

edit: I found one solution to your problem, but not the cause – would be interested to see if anyone knows what property or combination of properties is causing that.