Forum Moderators: open
I’m trying to create a drag-and-drop feature on a website, similar to a drag and drop shopping cart, although it’s much more limited so it doesn’t need to connect to a database to download data, etc.. I have the “products” (they’re really design services, but hey) stored in an array, represented by divs named service0 through service3 which the user drops onto a dropzone, named invoice-dropzone. When the respective div is dropped onto the dropzone, I need a list of dropped items to be generated as the user drags and drops more items. I want to store these items in another array, and then just have JavaScript write the contents of this arrary out, thereby producing a list.
Basically, I need to know how to make JavaScript grab the number on the end of the div (e.g. service1), look up this number in the original array and then transfer the name of the service into a new array of items that the user has selected. I’ve probably not explained this in the best way possible, maybe enclosing my current code will help.
new Draggable('service0', { revert: true });
new Draggable('service1', { revert: true });
new Draggable('service2', { revert: true });
new Draggable('service3', { revert: true });
var servicesArray = new Array(
"Biodegradable stickers",
"Street stencil",
"Microsite",
"Neutral newspaper ad"
);
Droppables.add('invoice-dropzone', {
onDrop: function(element,ondrop) {
Effect.Pulsate('invoice-dropzone', { duration: 0.4, pulses: 3 });
// Add dropped service to new array called chosenServicesArray here
}
});
for (var i=0; i<servicesArray.length; i++) {
document.write('<div class="invoice-service">' + chosenServicesArray[i] + "</div>");
}
If anyone can understand this problem, or even help out, that’d be fantastic and much appreciated! ;)
Max
