Question

I’m messing around with porting an image selection tool into jQuery. I’m having a couple little issues that are annoying me–

First, the sortable placeholder appears to be stuck at the top of the UL– it doesn’t move down to show the proposed new position if the item were dropped.

Second, the click events attached to the buttons don’t fire reliably– sometimes they work fine, other times it takes 2, 3 or 4 clicks before they fire.

I have been reading a ton of tutorials and the jQuery docs, and I believe I’ve done this properly, but I’m sure there’s better ways to handle what I’ve attempted.

Here’s a jsfiddle showing the behaviour. Any help appreciated!

http://jsfiddle.net/Y2tRW/9/

Answer 1

tested the first problem with

• ie9 (the placeholder work as expected if the document is loaded in ie8 compatibility mode)
• chromium21 (on a pc works and on another doesn’t, i’m disappointed)
• opera11

the placeholder works as expected, the second problem is that you need to click exactly on the <i> element, if you click on the button but not on the image it just scroll to the top of the page.

this will fix the problem, change

$("#sortable").on("click", "i.icon-pencil", function(e) {

to

$("#sortable").on("click", "a.btn:has(i.icon-pencil)", function(e) {

EDIT:
FOUND IT

you have float:left; (it’s in the bootstrap-combined.min.css for .span12) for all your li element but not for the highlight

add it in your fiddle and it will work.

it worked at home on ie cause i have the compatibility always set to IE8 now i get rid of that setting and it doesn’t work. by the way ie8 doesn’t apply float:left to display:list-item;