Мой 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. поэтому, пожалуйста, дайте идеальное решение. благодаря
Я не уверен, чего вы действительно хотите. Но я думаю, что вы хотите, чтобы этот пользователь мог изменить ответ после сброса флага ответа.
Итак, вот мое решение
// 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/