submit.js.tpl 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <script>
  2. var DraggableAnswer = {
  3. gallery: null,
  4. trash: null,
  5. deleteItem: function (item, insertHere) {
  6. if (insertHere.find(".exercise-draggable-answer-option").length > 0) {
  7. return false;
  8. }
  9. item.fadeOut(function () {
  10. var $list = $('<div class="gallery ui-helper-reset"/>').appendTo(insertHere);
  11. item.find('a.btn').remove();
  12. var droppedId = item.attr('id'),
  13. dropedOnId = insertHere.attr('id'),
  14. originSelectId = 'window_' + droppedId + '_select',
  15. value = dropedOnId.split('_')[2];
  16. $('#' + originSelectId + ' option')
  17. .filter(function (index) {
  18. return index === parseInt(value);
  19. })
  20. .attr("selected", true);
  21. var recycleButton = $('<a>')
  22. .attr('href', '#')
  23. .addClass('btn btn-default btn-xs')
  24. .append(
  25. "{{ "Undo" | get_lang }} ",
  26. $('<i>').addClass('fa fa-undo')
  27. )
  28. .on('click', function (e) {
  29. e.preventDefault();
  30. var liParent = $(this).parent();
  31. DraggableAnswer.recycleItem(liParent);
  32. });
  33. item.append(recycleButton).appendTo($list).fadeIn();
  34. });
  35. },
  36. recycleItem: function (item) {
  37. item.fadeOut(function () {
  38. item
  39. .find('a.btn')
  40. .remove()
  41. .end()
  42. .find("img")
  43. .end()
  44. .appendTo(DraggableAnswer.gallery)
  45. .fadeIn();
  46. });
  47. var droppedId = item.attr('id'),
  48. originSelectId = 'window_' + droppedId + '_select';
  49. $('#' + originSelectId + ' option:first').attr('selected', 'selected');
  50. },
  51. init: function (gallery, trash) {
  52. this.gallery = gallery;
  53. this.trash = trash;
  54. $("li", DraggableAnswer.gallery).draggable({
  55. cancel: "a.ui-icon",
  56. revert: "invalid",
  57. containment: "document",
  58. helper: "clone",
  59. cursor: "move"
  60. });
  61. DraggableAnswer.trash.droppable({
  62. accept: ".exercise-draggable-answer > li",
  63. hoverClass: "ui-state-active",
  64. drop: function (e, ui) {
  65. DraggableAnswer.deleteItem(ui.draggable, $(this));
  66. }
  67. });
  68. DraggableAnswer.gallery.droppable({
  69. drop: function (e, ui) {
  70. DraggableAnswer.recycleItem(ui.draggable, $(this));
  71. }
  72. });
  73. }
  74. };
  75. $(document).on('ready', function () {
  76. DraggableAnswer.init(
  77. $(".exercise-draggable-answer"),
  78. $(".droppable")
  79. );
  80. });
  81. </script>