Перетащите один div снова и снова к следующему div

Question

Перетащите один div снова и снова к следующему div

0

Мой HTML файл

<div id="dragAnwr" ></div>  
            <div id="dropimg" > </div>
              <div id="dropAnswr1" class="dropbox" ></div>
              <div id="dropAnswr2" class="dropbox" ></div>
              <div id="dropAnswr3" class="dropbox" ></div>
              <div id="dropAnswr4" class="dropbox" ></div>

и мой файл jQuery

$( "#dragAnwr" ).draggable({ revert: "invalid",cursor: 'move',containment: "parent", });
    $( "#dropAnswr1" ).add( "#dropAnswr2").add( "#dropAnswr3").add( "#dropAnswr3").add( "#dropAnswr4").droppable({

    drop: function( event, ui ) {

         hoverClass: "drop-hover"
      }

    });

здесь я хочу перетащить dragAnwr Div в следующие Divs

<div id="dropAnswr1" class="dropbox" ></div>
                  <div id="dropAnswr2" class="dropbox" ></div>
                  <div id="dropAnswr3" class="dropbox" ></div>
                  <div id="dropAnswr4" class="dropbox" ></div>

Используя мой код jQuery только один раз, когда divAnwr div упадет в любой другой div. здесь я хочу перетащить divAnwr div снова и снова в следующие div. поэтому, пожалуйста, дайте идеальное решение. благодаря

Arunraj S 23 сен. 2013, в 15:04

Источник

Теги:

javascript

jquery

html

drag-and-drop

1 ответ

Ещё вопросы

simpletron · Accepted Answer · 2013-09-24T07-47-00.000Z

Я не уверен, чего вы действительно хотите. Но я думаю, что вы хотите, чтобы этот пользователь мог изменить ответ после сброса флага ответа.

Итак, вот мое решение

// HTML
<div id="dragAnwr" >'   ' is Answer </div>
<div id="dropAnswr1" class="dropbox" >A</div>
<div id="dropAnswr2" class="dropbox" >B</div>
<div id="dropAnswr3" class="dropbox" >C</div>
<div id="dropAnswr4" class="dropbox" >D</div>

Вы можете добавить событие перетаскивания к элементам, выбрав их класс и установить обратный вызов функции drop

// js
$( "#dragAnwr" ).draggable({ 
    revert: "invalid",
    cursor: 'move',
    containment: "parent" 
});

$( ".dropbox" ).droppable({
    drop: function( event, ui ) {
        // remove flag class
        $(this).siblings().removeClass('selected');
        // add class to the dropped element
        $(this).addClass('selected');
    },
    hoverClass: "drop-hover"
});

И некоторые CSS для получения дополнительной информации

// css
div {
   border-style:solid;
   border-width:5px;
}
.selected {
   color: red;
}

Надеюсь, это поможет! Вы можете взглянуть на его скрипку http://jsfiddle.net/DKUg9/5/