Can't switch image on jquery drop -

Can't switch image on jquery drop -

i'm new forum i'll seek best specific possible.

i seem have problem trying switch image trying alter src-attr. in jquery). guess (=know) problem lays within dropevents in jquery-code. goal drag dragger on wide container, 5 smaller containers in it. when dragger dropped on 1 of smaller containers, want alter image positioned above whole drag element.

i have tried create demo: http://jsfiddle.net/yuj9apyy/11/ . here, doesn't work because of positions , stuff, can idea! also, didn't succeed adding image has changed...

here's relevant html:

//this image alter src-attr. from. <div id="grafiek"> <img src="afb/grafiekdord2010.png" id="grafiekdord2010"/> </div> //this bigcontainer, container 5 smaller containers, numbers along (these not of influence), , dragger. <div id="bigcontainer"> <span id="container1" class="drop1"></span><span id="container2" class="drop1"></span><span id="container3" class="drop1"></span><span id="container4" class="drop1"></span><span id="container5" class="drop1"></span><p id="jaartallen">2010 2015 2020 2025 2030</p> <div id="dragger"></div> </div>

all positions , widths/heights specified in css-code.all span-containers positioned next each other , fill space of bigcontainer. dragger little black container itself, , horizontally draggable within width of bigcontainer.

below jquery. have i'm new this, , did searching through -kind-of-tutorial-website. may i'm on right path, beingness totally wrong wouldn't surprise me...

$(document).ready(function(){ $("#bigcontainer") .delegate('#dragger',"draginit", function(ev, drag){ ev.preventdefault(); drag.horizontal(); drag.limit($("#bigcontainer")); drag.step(34.4,$("#bigcontainer"),"x") }) //this above works perfectly! took efford... $("#bigcontainer") .delegate('.drop1', "dropon", function(ev, drop, drag) { $('#grafiekdord2010').attr("src").replace("afb/grafiekdord2015.png", ".png"); $(this).attr("src", src); }) //the class drop1 beingness delegated to, class given every little container. }); //and doesn't work...at all.

i figured css isn't important. if is, allow me know , i'll post it.

thanks in advance answers! appreciate efford puts in help :) if need more code / information, allow me know!

this maybe not finish reply points out particular issues.

1) within dropon- callback src-attribute of $('#grafiekdord2010') don't store somewhere lost @ once. 2) don't know element keyword this points shurely not $('#grafiekdord2010'). if want alter src function should this:

$("#bigcontainer").delegate('.drop1', "dropon", function(ev, drop, drag) { var grafiek = $('#grafiekdord2010'), newsrc = grafiek.attr("src").replace("afb/grafiekdord2015.png", ".png"); grafiek.attr("src", newsrc); })

jquery