Have you looked at adding jQueryUI, rather than rolling your own drag/drop?
I've used it in the past with success.
Billy Cravens
bdcrav...@gmail.com
On Feb 5, 2013, at 11:58 AM, Elizabeth Adkins <eadk...@acisd.org> wrote:
>
> I'm working on the same thing. This is what I have so far. It works up to
> the .JSON call, but I can't get that to work. Any suggestions?
> <!------draganddrop.cfm--->
> <head>
> <style type="text/css">
> #div1 {width:336px;height:70px;padding:10px;border:1px solid #aaaaaa;}
> #div2 {width:336px;height:70px;padding:10px;border:1px solid #aaaaaa;}
> #div3 {width:336px;height:70px;padding:10px;border:1px solid #aaaaaa;}
> </style>
> <CFAJAXPROXY cfc="cfc.myPreferences" jsclassname="myPreferences">
> <script type="text/javascript"
> src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";></script>
> <script type="text/javascript">
> function allowDrop(ev)
> {
> ev.preventDefault();
> }
> function drag(ev)
> {
> ev.dataTransfer.setData("Text",ev.target.id);
> }
> function drop(ev,empID,tab)
> {
> var data=ev.dataTransfer.getData("Text");
> var placement = ev.target.id;
> var widgetID = data;
> ev.target.appendChild(document.getElementById(data));
> alert(widgetID +','+ placement +','+ empID +','+ tab);
> $.getJSON("/cfc/ myPreferences.cfc?method=updatePlacement&returnformat=json",
> {"tabname":tabname},
> function(result)
> {alert('Success!!! '+result.widget);}
> );
> ev.preventDefault();
> }
> </script>
> </head>
> <body>
> <cfset empID = 'XXX'>
> <cfoutput>
> <div id="div1" ondrop="drop(event,'#empID#','info')"
> ondragover="allowDrop(event)"></div>
> <div id="div2" ondrop="drop(event,'#empID#','info')"
> ondragover="allowDrop(event)"></div>
> <div id="div3" ondrop="drop(event,'#empID#','info')"
> ondragover="allowDrop(event)"></div>
> </cfoutput>
> <img id="mountain" src="/images/001.jpg" draggable="true"
> ondragstart="drag(event)" width="336" height="69" />
> <img id="circle" src="/images/delete.gif" draggable="true"
> ondragstart="drag(event)" />
> <img id="RoundedRectangle" src="/images/check_off.gif" draggable="true"
> ondragstart="drag(event)" />
> </body>
> <!---myPreferences.cfc---->
> <CFCOMPONENT displayname="myPreferences">
> <CFFUNCTION name="updatePlacement" access="remote" returntype="struct"
> output="yes">
> <CFARGUMENT name="tabname" required="yes">
> <CFSET var showme = structNew()>
> <cfset showme.tab = ARGUMENTS.tabname>
> <CFRETURN showme>
> </CFFUNCTION>
> </CFCOMPONENT>
>
>
>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:354325
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
