How to have a drag-and-drop <div> list it's contents?

Question

How can you find out what is contained within each Div? Using the following code:

<div id="inventory" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="chest" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<span id="sword" draggable="true" ondragstart="drag(event)">Sword </span>
<span id="shield" draggable="true" ondragstart="drag(event)">Sheild </span>

And this in Story Javascript:

Window.allowDrop = function (ev){
    ev.preventDefault();
}

Window.drag = function (ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

Window.drop = function (ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

And this in Story CSS:

#inventory {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

#chest {
    width: 128px;
    height: 256px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

How do I find out the contents of each Div? Is it something like this:

<<print #inventory>>
<<if #sword in #inventory>>do something<</if>>

 

Answer 1

You're probably going to want to write functions to do the core work and call those.  For example, you might do something like the following:

window.allowDrop = function (ev) {
	ev.preventDefault();
};

window.drag = function (ev) {
	ev.dataTransfer.setData('id', ev.target.id);
};

window.drop = function (ev) {
	ev.preventDefault();
	ev.target.appendChild(
		document.getElementById(
			ev.dataTransfer.getData('id')
		)
	);
};

window.containerToList = function (containerSel) {
	return $(containerSel).children().toArray().map(function (el) {
		return el.textContent;
	});
};

window.inventoryToList = function (containerSel) {
	return containerToList('#inventory');
};

window.chestToList = function (containerSel) {
	return containerToList('#chest');
};

window.containerHasItem = function (containerSel, itemSel) {
	return $(containerSel).children(itemSel).length > 0;
};

window.inventoryHasItem = function (itemSel) {
	return containerHasItem('#inventory', itemSel);
};

window.chestHasItem = function (itemSel) {
	return containerHasItem('#chest', itemSel);
};

Usage would be something like:

<<print inventoryToList().join(', ')>>

<<print chestToList().join(', ')>>

<<if inventoryHasItem('#sword')>> contains sword <</if>>
	/* OR */
<<if not inventoryHasItem('#sword')>> does not contain sword <</if>>
	/* OR */
<<if inventoryHasItem('#sword')>>
	contains sword
<<else>>
	does not contain sword
<</if>>

<<if chestHasItem('#sword')>> contains sword <</if>>
	/* OR */
<<if not chestHasItem('#sword')>> does not contain sword <</if>>
	/* OR */
<<if chestHasItem('#sword')>>
	contains sword
<<else>>
	does not contain sword
<</if>>

 

Comments

Works great, but returns an error when used like this:

<span id='shield'><img src='https://www.dropbox.com/s/t2tc8oe1l7gyl41/Sheild.png?dl=1'></span>

And how do you keep items in the inventory between passages?

Edit: fixed issue of items not persisting between passages. Here is how: I wrapped <<include "Sidebar">> in a <div> with the id "Sidebar" (with the inventory on the line below and so not inside the <div>). I then created the following replacements for goto in the widget-tagged passage:

<<widget move>><<replace #passages>><<include $args[0]>><</replace>><<replace #Sidebar>><<include "Sidebar">><</replace>><</widget>>
<<widget linkmove>><<link $args[0]>><<if ndef $args[1]>><<move $args[0]>><<else>><<move $args[1]>><</if>><</link>><</widget>>

 

---

This is an example of why we should explain exactly how we're planning to use something up front.  You didn't mention you were planning on putting elements within the draggable elements.

Try the following: (only drag() and containerToList() were updated)

window.allowDrop = function (ev) {
	ev.preventDefault();
};

window.drag = function (ev) {
	var dragTarget = ev.target;

	while (!dragTarget.hasAttribute('draggable')) {
		dragTarget = dragTarget.parentNode;
	}

	ev.dataTransfer.setData('id', dragTarget.id);
};

window.drop = function (ev) {
	ev.preventDefault();
	ev.target.appendChild(
		document.getElementById(
			ev.dataTransfer.getData('id')
		)
	);
};

window.containerToList = function (containerSel) {
	return $(containerSel).children().toArray().map(function (el) {
		return el.outerHTML;
	});
};

window.inventoryToList = function (containerSel) {
	return containerToList('#inventory');
};

window.chestToList = function (containerSel) {
	return containerToList('#chest');
};

window.containerHasItem = function (containerSel, itemSel) {
	return $(containerSel).children(itemSel).length > 0;
};

window.inventoryHasItem = function (itemSel) {
	return containerHasItem('#inventory', itemSel);
};

window.chestHasItem = function (itemSel) {
	return containerHasItem('#chest', itemSel);
};

 

---

Thanks, works fine!