Implemented Basic Drag and Drop for inventory Items

rpg-docs/.meteor/packages

@@ -11,7 +11,6 @@ accounts-ui
 random
 dburles:collection-helpers
 reactive-var
-cw4gn3r:jquery-event-drag
 underscore
 aldeed:collection2
 differential:vulcanize

rpg-docs/.meteor/versions

@@ -15,7 +15,6 @@ boilerplate-generator@1.0.2
 callback-hook@1.0.2
 check@1.0.4
 conielo:autoform-polymer-paper@0.1.1
-cw4gn3r:jquery-event-drag@2.2.0
 dburles:collection-helpers@1.0.2
 dburles:mongo-collection-instances@0.3.1
 ddp@1.0.14

rpg-docs/client/views/GeneralCSS/general.css

@@ -140,6 +140,10 @@ paper-button {
 	visibility: hidden;
 }
 
+.hidden{
+	opacity: 0;
+}
+
 @media (max-width: 640px) {
 	html /deep/ paper-action-dialog[global-dialog] {
 		top: 0 !important;

rpg-docs/client/views/character/inventory/inventory.html

@@ -21,7 +21,7 @@
 					</div>
 				</paper-shadow>
 				<!--Equipment-->
-				<paper-shadow class="card container">
+				<paper-shadow class="card container equipmentContainer">
 					<div class="equipmentTop" layout horizontal center>
 						<div class="containerName subhead" flex>
 							Equipment
@@ -32,24 +32,16 @@
 					<div flex class="equipmentMain">
 						{{#if armor}}
 						{{#with armor}}
-							<div class="itemSlot">
+							{{>inventoryItem}}
-								<paper-item class="inventoryItem armorItem" hero-id="main" {{detailHero}} layout horizontal>
-									{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
-								</paper-item>
-							</div>
 						{{/with}}
 						{{/if}}
 						{{#each equipment}}
-							<div class="itemSlot">
+							{{>inventoryItem}}
-								<paper-item class="inventoryItem" hero-id="main" {{detailHero}} layout horizontal>
-									{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
-								</paper-item>
-							</div>
 						{{/each}}
 					</div>
 				</paper-shadow>
 				{{#each containers}}
-					<paper-shadow class="card container"  hero-id="main" {{detailHero}} style="order: {{containerOrder}};">
+					<paper-shadow class="card container itemContainer"  hero-id="main" {{detailHero}} style="order: {{containerOrder}};">
 						<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
 							<div class="containerName subhead" hero-id="title" flex {{detailHero}}>{{name}}</div>
 							<div class="caption" style="margin-right: 8px">{{valueString totalValue}}</div>
@@ -57,11 +49,7 @@
 						</div>
 						<div flex class="containerMain">
 							{{#each items ../_id _id}}
-								<div class="itemSlot">
+								{{>inventoryItem}}
-									<paper-item class="inventoryItem" hero-id="main" {{detailHero}} layout horizontal>
-										{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
-									</paper-item>
-								</div>
 							{{/each}}
 						</div>
 					</paper-shadow>
@@ -74,4 +62,12 @@
 			<paper-fab-menu-item id="addContainer" icon="work" color="#d23f31" tooltip="Container"></paper-fab-menu-item>
 		</paper-fab-menu>
 	</div>
-</template>
+</template>
+
+<template name="inventoryItem">
+	<div class="itemSlot">
+		<paper-item class="inventoryItem {{hidden}}" hero-id="main" {{detailHero}} layout horizontal draggable="true">
+			{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
+		</paper-item>
+	</div>
+</template>

rpg-docs/client/views/character/inventory/inventory.js

@@ -18,9 +18,6 @@ Template.inventory.helpers({
 	showAddButtons: function(){
 		return Template.instance().showAddButtons.get();
 	},
-	ne1: function(num){
-		return num !== 1;
-	},
 	colorClass: function(){
 		return getColorClass(this.color)
 	},
@@ -102,3 +99,65 @@ Template.inventory.events({
 		});
 	}
 });
+
+Template.inventoryItem.helpers({
+	ne1: function(num){
+		return num !== 1;
+	},
+	hidden: function(){
+		return Session.equals("inventory.dragItemId", this._id)? "hidden" : null;
+	}
+});
+
+Template.layout.events({
+	"dragstart .inventoryItem": function(event, instance){
+		Session.set("inventory.dragItemId", this._id);
+		Session.set("inventory.dragItemOriginalContainer", this.container);
+		Session.set("inventory.dragItemOriginalCharacter", this.charId);
+	},
+	"dragend .inventoryItem": function(event, instance){
+		resetInvetorySession();
+	},
+	"dragover .itemContainer": function(event, instance){
+		event.preventDefault();
+	},
+	"dragover .equipmentContainer": function(event, instance){
+		var containerId = Session.get("inventory.dragItemOriginalContainer");
+		var charId = Session.get("inventory.dragItemOriginalCharacter");
+
+		if (this._id !== charId) return; //we can't equip something we don't own
+
+		var item = Items.findOne(Session.get("inventory.dragItemId"));
+		if (item.equipmentSlot === "none") return; //we can't equip this
+
+		event.preventDefault(); //this is a valid drop zone
+	},
+	"drop .container": function(event, instacne){
+		var item = Items.findOne(Session.get("inventory.dragItemId"));
+		if (item.container === this._id && !item.equipped) return; //the item is already here
+		if(Containers.findOne(this._id)){//the container exists
+			Items.update(item._id, {$set: {container: this._id, charId: this.charId, equipped: false}});
+		}
+		resetInvetorySession();
+	},
+	"drop .equipmentContainer": function(event, instance){
+		var containerId = Session.get("inventory.dragItemOriginalContainer");
+		var charId = Session.get("inventory.dragItemOriginalCharacter");
+
+		if (this._id !== charId) return; //we can't equip something we don't own
+
+		var item = Items.findOne(Session.get("inventory.dragItemId"));
+		if (item.equipmentSlot === "none") return; //we can't equip this
+		//equip the item if it's not equipped
+		if(!item.equipped) Items.update(item._id, {$set: {equipped: true, container: containerId, charId: charId}});
+		resetInvetorySession();
+	}
+})
+
+var resetInvetorySession = function(){
+	_.defer(function(){
+		Session.set("inventory.dragItemId", null);
+		Session.set("inventory.dragItemOriginalContainer", null);
+		Session.set("inventory.dragItemOriginalCharacter", null);
+	})
+}