This is a guide on how to implement drag&drop-support from a web page to CET. It allows you to trigger code within your extension from a drag&drop from your web page, and you can pass any text data from your HTML code to your CM code.
Sample of Drag Support for an Element on a Web Page
This is an example of how you can set an HTML-element as draggable and pass data with it:
<!DOCTYPE HTML>
<html>
<head>
<script>
function drag(ev) {
ev.dataTransfer.setData('text', 'cet://test-command@custom.myExtension/testdata');
}
</script>
</head>
<body>
<div draggable="true" ondragstart="drag(event)">drag me</div>
</body>
</html>
This code sets the text-element for the drag&drop-operation to a cet://-url that contains data that is passed to CET when dropped on it.
The URL is in the following format:
cet://[name-of-command]@[extension package]/[parameter text] Example: cet://my-test-command@custom.myExtension/my-test-data
The command name can be any alphanumeric name (can also contain dashes, '-') and the parameter text is an arbitrary string. The extension package must be the main package of your extension (where its extension.cm file is located).
Handling the Drag&Drop-operation in Your Extension
This code sample demonstrates how you can have the data from the drag&drop-operation trigger an event in your code. The genericCall() must be placed in your extension class, contained in your extension.cm file:
public Object genericCall(ExtensionEnv env, str key, Object[] args, Str error) { if (key == "test-command" and args and args.count >= 1) { str arg = args[0].str; pln("Called with arg: " # arg); } return null; }
The key-parameter contains the name of the command and the first element of the args-array contains the string with the parameter text. The parameter text is always a single string so if you want to pass multiple parameters you can encode them for example by using separator chars or as XML or JSON.
Comments
0 comments
Please sign in to leave a comment.