<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)); } }); } }; var MatchingDraggable = { colorDestination: '#316B31', curviness: 0, connectorType: 'Straight', initialized: false, init: function (questionId) { var windowQuestionSelector = '.window' + questionId + '_question', countConnections = $(windowQuestionSelector).length, colorArray = [], colorArrayDestination = []; if (countConnections > 0) { colorArray = $.xcolor.analogous("#da0", countConnections); colorArrayDestination = $.xcolor.analogous("#51a351", countConnections); } else { colorArray = $.xcolor.analogous("#da0", 10); colorArrayDestination = $.xcolor.analogous("#51a351", 10); } jsPlumb.importDefaults({ DragOptions: {cursor: 'pointer', zIndex: 2000}, PaintStyle: {strokeStyle: '#000'}, EndpointStyle: {strokeStyle: '#316b31'}, Endpoint: 'Rectangle', Anchors: ['TopCenter', 'TopCenter'] }); var exampleDropOptions = { tolerance: 'touch', hoverClass: 'dropHover', activeClass: 'dragActive' }; var destinationEndPoint = { endpoint: ["Dot", {radius: 15}], paintStyle: {fillStyle: MatchingDraggable.colorDestination}, isSource: false, connectorStyle: {strokeStyle: MatchingDraggable.colorDestination, lineWidth: 8}, connector: [ MatchingDraggable.connectorType, {curviness: MatchingDraggable.curviness} ], maxConnections: 1000, isTarget: true, dropOptions: exampleDropOptions, beforeDrop: function (params) { jsPlumb.select({source: params.sourceId}).each(function (connection) { jsPlumb.detach(connection); }); var selectId = params.sourceId + "_select"; var value = params.targetId.split("_")[2]; $("#" + selectId + " option") .removeAttr('selected') .filter(function (index) { return index === parseInt(value); }) .attr("selected", true); return true; } }; var count = 0; var sourceDestinationArray = []; $(windowQuestionSelector).each(function (index) { var windowId = $(this).attr("id"); var scope = windowId + "scope"; var destinationColor = colorArray[count].getHex(); var sourceEndPoint = { endpoint: [ "Dot", {radius: 15} ], paintStyle: { fillStyle: destinationColor }, isSource: true, connectorStyle: { strokeStyle: "#8a8888", lineWidth: 8 }, connector: [ MatchingDraggable.connectorType, {curviness: MatchingDraggable.curviness} ], maxConnections: 1, isTarget: false, dropOptions: exampleDropOptions, scope: scope }; sourceDestinationArray[count + 1] = sourceEndPoint; count++; jsPlumb.addEndpoint( windowId, { anchor: ['RightMiddle', 'RightMiddle', 'RightMiddle', 'RightMiddle'] }, sourceEndPoint ); var destinationCount = 0; $(windowQuestionSelector).each(function (index) { var windowDestinationId = $(this).attr("id"); destinationEndPoint.scope = scope; destinationEndPoint.paintStyle.fillStyle = colorArrayDestination[destinationCount].getHex(); destinationCount++; jsPlumb.addEndpoint( windowDestinationId + "_answer", { anchors: ['LeftMiddle', 'LeftMiddle', 'LeftMiddle', 'LeftMiddle'] }, destinationEndPoint ); }); }); MatchingDraggable.attachBehaviour(); }, attachBehaviour: function () { if (!MatchingDraggable.initialized) { MatchingDraggable.initialized = true; } } }; jsPlumb.ready(function () { if ($(".drag_question").length > 0) { MatchingDraggable.init(); $(document).scroll(function () { jsPlumb.repaintEverything(); }); $(window).resize(function () { jsPlumb.repaintEverything(); }); } }); $(document).on('ready', function () { DraggableAnswer.init( $(".exercise-draggable-answer"), $(".droppable") ); }); </script>