Добавить класс на событие падения для головоломки изображения

0

Привет, ребята, я использую систему храпового доски 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>
Теги:
jquery-draggable

1 ответ

1
Лучший ответ

Несколько пунктов:

  • Когда вы задаете вопрос 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" )
    }
});

Вы можете увидеть это в действии на моей вилке своей скрипки.

  • 0
    На самом деле это не работает. Я отредактировал вопрос как ты сказал
  • 0
    Что не работает; вызов addClass? И я все еще вижу то, что я предполагаю, там шаблоны Django ... :-)
Показать ещё 8 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню