allow to change the background image

css/draggable_builder.css

@@ -86,7 +86,6 @@
 }
 
 .xblock--drag-and-drop .target-img {
-	background: url(../img/triangle.png) no-repeat;
 	width: 100%;
 	height: 100%;
 }
@@ -219,6 +218,10 @@
 	margin-left: 0;
 }
 
+.xblock--drag-and-drop .drag-builder .target-image-form input {
+	width: 400px;
+}
+
 .xblock--drag-and-drop .zones-form .zone-row label {
 	display: inline-block;
 	width: 18%;

draggable_builder.html

@@ -46,6 +46,11 @@
                         <header class="tab-header">
                             <h3>Zone Positions</h3>
                         </header>
+                        <section class="tab-content target-image-form">
+                            <label>New background URL:</label>
+                            <input type="text">
+                            <button class="btn">Change background</button>
+                        </section>
                         <section class="tab-content"> 
                             <div class="items">
                                 <form class="zones-form"></form>

js/draggable_builder.js

@@ -128,6 +128,9 @@ var dragAndDrop = (function() {
 
 			// Get count of all active items
 			_fn.items.init();
+
+			// Set the target image
+			_fn.$target.css('background', 'url(' + _fn.data.targetImg + ') no-repeat');
 		},
 
 		build: {
@@ -149,6 +152,7 @@ var dragAndDrop = (function() {
 			init: function() {
 				_fn.build.clickHandlers();
 				_fn.build.form.zone.add();
+				_fn.$target.css('background', 'url(' + _fn.data.targetImg + ') no-repeat');
 			},
 			clickHandlers: function() {
 				var $fbkTab = _fn.build.$el.feedback.tab,
@@ -179,6 +183,15 @@ var dragAndDrop = (function() {
 
 						// Placeholder shim for IE9
 						$.placeholder.shim();
+					})
+					.on( 'click', '.target-image-form button', function(e) {
+						e.preventDefault();
+
+						_fn.data.targetImg = $('.target-image-form input').val();
+						_fn.$target.css('background', 'url(' + _fn.data.targetImg + ') no-repeat');
+
+						// Placeholder shim for IE9
+						$.placeholder.shim();
 					});
 
 				$itemTab
@@ -639,11 +652,11 @@ var dragAndDrop = (function() {
 			}
 		},
 
-		// SAMPLE: What the data may look like
 		data: {
 			feedback: {},
 			items: [],
-			zones: []
+			zones: [],
+			targetImg: 'img/triangle.png'
 		}
 	};