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:354314
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
