Привет, ребята, я использую систему храпового доски Django и загрузочный файл для проекта, где у меня есть возможность перетаскивания изображения jquery. Я не знаю jquery или javascript. До сих пор я реализовал перетаскивание изображения, но теперь я хочу добавить класс в событие drop.
Здесь, в моем требовании, у меня есть изображение, вырезанное в пяти частях. Каждая деталь хранится в одном контейнере. пользователь может перетащить кусок, чтобы удалить его в другой контейнер, чтобы завершить изображение. но когда я вывожу его в другой контейнер, все изображения выравниваются по вертикали, а не привязаны к предыдущей части.
поэтому я решил добавить класс в событие drop, которое может добавить style = "position: absolute; свойство image.
Надеюсь, вы поняли мою проблему. Я знаю, что это вопрос нуба, но, пожалуйста, помогите нам с кодом
Здесь я добавил его на jsfiddle http://jsfiddle.net/binit/JnYB9/ Чтобы вы могли поиграть, помогите мне
код
<script>
$(function() {
$( "#sortable1" ).sortable({
connectWith: "div"
});
$( "#sortable2" ).sortable({
connectWith: "div"
});
$( "#sortable1, #sortable2" ).disableSelection();
});
</script>
{% endblock headercontent %}
{% block content %}
<div class="row-fluid" >
<div class="span4">
<div class="span1"></div>
<div id="sortable1" class="well sidebar-nav sidebar-nav-fixed span11">
<legend>Collect Coupon parts</legend>
1st part
<img class="ui-state-highlight" src="{% static 'images/demo/north.png' %}" >
2nd part
<img class="ui-state-highlight" src="{% static 'images/demo/south.png' %}" >
3rd part
<img class="ui-state-highlight" src="{% static 'images/demo/east.png' %}" >
4th part
<img class="ui-state-highlight" src="{% static 'images/demo/west.png' %}" >
5th part
<img class="ui-state-highlight" src="{% static 'images/demo/center.png' %}" >
</div>
</div>
<div id="sortable2" class=" well sidebar-nav sidebar-nav-fixed span8">
<legend>Canvas section</legend>
</div>
</div>
Несколько пунктов:
Когда вы задаете вопрос Javascript на стороне клиента, лучше не загрязнять воды с помощью разметки на стороне сервера. Поэтому не-HTML-шаблоны, подобные этому, вероятно, должны быть либо расширены (с, скажем, View Source), либо удалены:
{% extends "dashboard.html" %}
{% block headercontent %}
В вашем коде уже есть пример добавления класса при удалении (по крайней мере, если я правильно догадываюсь о перетаскивании jQuery, это было долгое время) в этом блоке.
drop: function( event, ui ) {
$( this )
.addClass( "fullbowl" )
^^^^^^^^^^^^^^^^^^^^^^^^
.find( "div" )
.html( "" );
Таким образом, вы можете дублировать это, если это другая группа сортировок, которую вы хотите addClass('something')
и добавить другой класс, добавить второй addClass('something')
на этот, что было бы хорошо - или изменить CSS для fullbowl
для добавления новых свойств. Множество вариантов.
С вашей новой Fiddle, это легче проверить, и становится очевидным, что вы не используете событие JQuery UI sortable
API, но одно из droppable
. Если вы использовали stop
, от sortable
, он отлично работает:
$( "#sortable2" ).sortable({
connectWith: "div",
stop: function( event, ui ) {
ui.item.addClass( "fullbowl" )
}
});
Вы можете увидеть это в действии на моей вилке своей скрипки.