Allow backpack sounds/costumes to be dragged into sprite and stage tiles

src/components/sprite-selector/sprite-list.jsx

@@ -53,8 +53,11 @@ const SpriteList = function (props) {
                 // Note the absence of the self-sharing check: a sprite can share assets with itself.
                 // This is a quirk of 2.0, but seems worth leaving possible, it
                 // allows quick (albeit unusual) duplication of assets.
-                isRaised = isRaised || draggingType === DragConstants.COSTUME ||
-                    draggingType === DragConstants.SOUND;
+                isRaised = isRaised || [
+                    DragConstants.COSTUME,
+                    DragConstants.SOUND,
+                    DragConstants.BACKPACK_COSTUME,
+                    DragConstants.BACKPACK_SOUND].includes(draggingType);
 
                 return (
                     <SortableAsset

src/containers/stage-selector.jsx

@@ -16,7 +16,13 @@ import backdropLibraryContent from '../lib/libraries/backdrops.json';
 import costumeLibraryContent from '../lib/libraries/costumes.json';
 import {handleFileUpload, costumeUpload} from '../lib/file-uploader.js';
 
-const dragTypes = [DragConstants.COSTUME, DragConstants.SOUND];
+const dragTypes = [
+    DragConstants.COSTUME,
+    DragConstants.SOUND,
+    DragConstants.BACKPACK_COSTUME,
+    DragConstants.BACKPACK_SOUND
+];
+
 const DroppableStage = DropAreaHOC(dragTypes)(StageSelectorComponent);
 
 class StageSelector extends React.Component {
@@ -86,6 +92,15 @@ class StageSelector extends React.Component {
             this.props.vm.shareCostumeToTarget(dragInfo.index, this.props.id);
         } else if (dragInfo.dragType === DragConstants.SOUND) {
             this.props.vm.shareSoundToTarget(dragInfo.index, this.props.id);
+        } else if (dragInfo.dragType === DragConstants.BACKPACK_COSTUME) {
+            this.props.vm.addCostume(dragInfo.payload.body, {
+                name: dragInfo.payload.name
+            }, this.props.id);
+        } else if (dragInfo.dragType === DragConstants.BACKPACK_SOUND) {
+            this.props.vm.addSound({
+                md5: dragInfo.payload.body,
+                name: dragInfo.payload.name
+            }, this.props.id);
         }
     }
     setFileInput (input) {

src/containers/target-pane.jsx

@@ -152,6 +152,18 @@ class TargetPane extends React.Component {
                 this.props.vm.shareCostumeToTarget(dragInfo.index, targetId);
             } else if (targetId && dragInfo.dragType === DragConstants.SOUND) {
                 this.props.vm.shareSoundToTarget(dragInfo.index, targetId);
+            } else if (dragInfo.dragType === DragConstants.BACKPACK_COSTUME) {
+                // In scratch 2, this only creates a new sprite from the costume.
+                // We may be able to handle both kinds of drops, depending on where
+                // the drop happens. For now, just add the costume.
+                this.props.vm.addCostume(dragInfo.payload.body, {
+                    name: dragInfo.payload.name
+                }, targetId);
+            } else if (dragInfo.dragType === DragConstants.BACKPACK_SOUND) {
+                this.props.vm.addSound({
+                    md5: dragInfo.payload.body,
+                    name: dragInfo.payload.name
+                }, targetId);
             }
         }
     }