1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- <script>
- var DraggableAnswer = {
- gallery: null,
- trash: null,
- deleteItem: function (item, insertHere) {
- if (insertHere.find(".exercise-draggable-answer-option").length > 0) {
- return false;
- }
- item.fadeOut(function () {
- var $list = $('<div class="gallery ui-helper-reset"/>').appendTo(insertHere);
- item.find('a.btn').remove();
- var droppedId = item.attr('id'),
- dropedOnId = insertHere.attr('id'),
- originSelectId = 'window_' + droppedId + '_select',
- value = dropedOnId.split('_')[2];
- $('#' + originSelectId + ' option')
- .filter(function (index) {
- return index === parseInt(value);
- })
- .attr("selected", true);
- var recycleButton = $('<a>')
- .attr('href', '#')
- .addClass('btn btn-default btn-xs')
- .append(
- "{{ "Undo" | get_lang }} ",
- $('<i>').addClass('fa fa-undo')
- )
- .on('click', function (e) {
- e.preventDefault();
- var liParent = $(this).parent();
- DraggableAnswer.recycleItem(liParent);
- });
- item.append(recycleButton).appendTo($list).fadeIn();
- });
- },
- recycleItem: function (item) {
- item.fadeOut(function () {
- item
- .find('a.btn')
- .remove()
- .end()
- .find("img")
- .end()
- .appendTo(DraggableAnswer.gallery)
- .fadeIn();
- });
- var droppedId = item.attr('id'),
- originSelectId = 'window_' + droppedId + '_select';
- $('#' + originSelectId + ' option:first').attr('selected', 'selected');
- },
- init: function (gallery, trash) {
- this.gallery = gallery;
- this.trash = trash;
- $("li", DraggableAnswer.gallery).draggable({
- cancel: "a.ui-icon",
- revert: "invalid",
- containment: "document",
- helper: "clone",
- cursor: "move"
- });
- DraggableAnswer.trash.droppable({
- accept: ".exercise-draggable-answer > li",
- hoverClass: "ui-state-active",
- drop: function (e, ui) {
- DraggableAnswer.deleteItem(ui.draggable, $(this));
- }
- });
- DraggableAnswer.gallery.droppable({
- drop: function (e, ui) {
- DraggableAnswer.recycleItem(ui.draggable, $(this));
- }
- });
- }
- };
- $(document).on('ready', function () {
- DraggableAnswer.init(
- $(".exercise-draggable-answer"),
- $(".droppable")
- );
- });
- </script>
|