Попытка изменить размер DIV, чтобы соответствовать ширине другой DIV при нажатии

Question

Так вот что я работаю для справки:

http://www.ryanhammond.us/ellenpaul/index.html

Если вы смотрите на веб-сайте, вы увидите сетку эскизов. Я использовал сортировки Jquery, чтобы разрешить перерисовывать миниатюры.

Все большие пальцы Ли в неупорядоченном списке которых функция sortables применяется к

<script> 
    $(function() { 
    $("ul").sortable({ 
     placeholder: "highlight" 
    }); 
    $("ul").disableSelection(); 
    }); 
</script> 

Моя проблема заключается в том, что вы определяете только один заполнитель для всех миниатюр (заполнитель является светло-голубой квадрат, который появляется когда вы перетаскиваете большой палец - это .highlight), и у меня есть две разные ширины эскизов. Sooooo, если я установил .highlight в ширину 300 пикселей, он отлично выглядит с миниатюрами ширины 300 пикселей, но неправильно с более тонкими эскизами 200 пикселей.

Моя лучшая идея заключается в том, чтобы написать еще один код javascript, который определяет ширину эскиза при его нажатии и изменении размера заполнителя до этой ширины ... но я новичок в java, поэтому я не уверен если это лучшее исправление.

Любые идеи? Спасибо заранее:

Answer 1

Я заметил, что когда вы перетаскиваете Div, на нем добавляется класс «ui-sortable-helper», поэтому, если вы выберете ширину div после перетаскивания, измените размер всех div, класс «подсветка», он должен работать, это образец:

<script> 
    $(function() { 
    $("ul").sortable({ 
     placeholder: "highlight", 
     start: function(event, ui) { 
     setTimeout("resize()",0); 
    }, 
    stop: function(event, ui) { 
    } 
    }); 
    $("ul").disableSelection(); 
    }); 
function resize() 
{ 
var width = $($(".ui-sortable-helper")[0]).css("width"); 
$($(".highlight")[0]).attr("style","width:"+width); 
} 
    </script>