I was trying to dragging a canvas within a canvas. To handle the dragging events I was using
addDragRepositionStartHandler,
addDragRepositionMoveHandler,addDragRepositionStopHandler
handlers.
I need to restrict dragging on few condition. Lets say I want to restrict dragging when we'll get event.getX() more than 500 in public void onDragRepositionMove(DragRepositionMoveEvent event).
I tried event.cancel();, but it don't serve the purpose. All I need is to restrict the dragging.
Any kind of help is appreciated.
Take a look at this showcase demo. Some relevant code extracted from the demo:
DragPiece green = new DragPiece("pawn_green.png"){
#Override
protected boolean setDragTracker() {
String html = Canvas.imgHTML("pieces/24/pawn_green.png", 24, 24);
EventHandler.setDragTracker(html);
return false;
}
};
green.setID("greenPiece");
green.setTitle("Green Piece");
green.setLeft(150);
green.setTop(50);
final Label label = new Label("Drop Here");
label.setLeft(250);
label.setTop(50);
label.setShowEdges(true);
label.setAlign(Alignment.CENTER);
label.setCanAcceptDrop(true);
label.addDropOverHandler(new DropOverHandler() {
public void onDropOver(DropOverEvent event) {
label.setBackgroundColor("#FFFF88");
}
});
label.addDropOutHandler(new DropOutHandler() {
public void onDropOut(DropOutEvent event) {
label.setBackgroundColor("#ffffff");
}
});
label.addDropHandler(new DropHandler() {
public void onDrop(DropEvent event) {
Canvas target = EventHandler.getDragTarget();
SC.say("You dropped the " + target.getID());
}
});
Some notes about this code:
Notice how a label is used to define the drop region, but you could use other Canvas objects for that purpose.
The addDropOverHandler, addDropOutHandler and addDropHandler methods allow you to add the required handlers to this Label or Canvas object to produce the desired results.
DragPiece is just a subclass of Img that has setCanDragReposition(true) and setCanDrop(true), so that the element is draggable.
Related
I am working on angular application where I am using syncfusion scheduler to show appointments on calendar. I want to give dynamic color or class to events so that I can do some styling. I am not sure how to do it. The only way I am able to do is by adding category color on events
I want to achieve to style the events on calendar like image but not with just one color. I want to use different colors.
Below is my code
<ejs-schedule #scheduleObj class="schedule" cssClass='schedule-group-custom-work-days' width='100%' height='650px'
[selectedDate]="selectedDate" [eventSettings]='eventSettings' [showQuickInfo]='showQuickInfo'
(cellDoubleClick)='cellDoubleClick($event)' (popupOpen)='onPopupOpen($event)'
(actionComplete)="onActionComplete($event)" (eventRendered)="onEventRendered($event)"
(renderCell)="onRenderCell($event)" [workDays]='workWeekDays'>
</ejs-schedule>
component.ts
#ViewChild('scheduleObj')
public scheduleObj!: ScheduleComponent;
public eventSettings: EventSettingsModel = { dataSource: [] };
public selectedDate: Date = new Date();
public workWeekDays!: number[];
events: any[] = [];
getAppointment(){
//api call and got response
const events: any[] = [];
events.push({
Id: appointment.id.toString(),
Subject:
appointment.patientFirstName + ' ' + appointment.patientLastName,
// BELOW IS THE VARIABLE WHICH I AM USING FOR ADDING BACKGROUND COLOR AS RED
CategoryColor: "red"
StartTime: startDate,
EndTime: endDate
});
this.events = events;
this.eventSettings = {
dataSource: <Object[]>extend([], events, null, true)
};
Is there a way I can add class to my events or some way to style my events with different different colors.
You can use the different color or class to the events by making use of the cssClass field in the appointment model. For more references, please visit to the below page.
https://ej2.syncfusion.com/angular/documentation/schedule/appointments/#using-cssclass
Big fan of your work.
I am building a Blazor WASM application utilizing the HTML5 Drag and Drop API. I am having the strangest issue that I've been trying to fix for hours.
This app allows one to put objects into "groups". A group can contain other groups, and so on.
I've got it mostly working, but two issues are leaving me scratching my head.
SOLVED See comment 1) When I drag a group UP from underneath into another group, the group is migrated into the destination but the subitems in the original group disappear.
Before I drag the bottom group up:
https://i.imgur.com/t7rGReI.png
After:
https://i.imgur.com/t5rIS1Y.png
When I drag a group DOWN from above into another group, the destination group's GUID overwrites the source and I am left with one group.
Before:
https://i.imgur.com/zC34cyT.png
After:
https://i.imgur.com/lSr4hGk.png
Groups are the orange shapes, Interfaces are the blue shapes. They are rendered via the Field class.
I've tried every permutation of the code I can think of and nothing has made it any better. I must be missing something here.
Group.razor
#inherits Item
<div id=#Uid class="tb-group tb-draggable #CssClass"
draggable = "true"
ondragover="event.preventDefault()"
#ondragstart:stopPropagation
#ondragstart="#(()=>HandleOnDragStart(this))"
#ondragend="HandleOnDragEnd"
#ondragenter="HandleOnDragEnter"
#ondragleave="HandleOnDragLeave"
#ondrop:stopPropagation
#ondrop="HandleOnDrop"
#onclick:stopPropagation
#onclick="Debug_Output">#Title : #Uid : #Parent.Uid
#foreach(Item item in Items){
if(item.GetType() == typeof(Group)){
<Group Uid=#item.Uid Title="#item.Title" Field=#Field Parent=#this></Group>
} else if(item.GetType() == typeof(Interface)){
<Interface Uid=#item.Uid Title="#item.Title" Field=#Field Parent=#this></Interface>
}
}
</div>
This code is responsible for OnDrop behavior (HandleOnDrop)
Group.razor.cs -
public partial class Group : Item {
public List<Item> Items;
protected override void OnInitialized()
{
Items = new List<Item>();
base.OnInitialized();
}
public void HandleOnDrop(){
if(Payload.Uid != this.Uid){
Console.WriteLine("Removing item " + Payload.Uid);
Items.Add(Payload);
Payload.Parent.Items.Remove(Payload.Parent.Items.Find(x => x.Uid == Payload.Uid));
}
CssClass = "";
this.Field.Refresh();
Payload.Parent = this;
}
...
Interface.razor
#inherits Item
<div id=#Uid draggable="true" class="tb-interface tb-draggable #CssClass"
#ondragstart:stopPropagation
#ondragstart="#(()=>HandleOnDragStart(this))"
#onclick:stopPropagation>#Title : #Uid : #Parent.Uid</div>
Could it be how I initialize these components (via constructor)? Maybe they're getting cleaned up by the GC?
Field.razor.cs -
public partial class Field : Group {
protected override void OnInitialized()
{
base.OnInitialized();
}
public void AddGroup(){
Group grp = new Group();
grp.Parent = this;
Items.Add(grp);
StateHasChanged();
}
public void AddInterface(){
Interface iface = new Interface();
iface.Parent = this;
Items.Add(iface);
StateHasChanged();
}
public void Refresh(){
StateHasChanged();
}
}
I'm at my wits end here. If anyone could give me some advice it would be much appreciated.
Issue #1: Needed to pass the Items object into Group on instantiation
Issue #2: Needed to use #key to maintain reference
I am using the drag and drop to be able to move one of my nodes within a page. What I want to be able to do is once the drag and drop is completed, get the XY position and if it is outside a certain position (XY), then the class applied to the node should be updated.
http://jsfiddle.net/gabrielesandoval/ab1cjrcj/
CSS:
.dd-demo-inside {
background-color: #8DD5E7;
color: #000;
}
.dd-demo-outside {
background-color: #004C6D;
}
JS:
YUI().use('dd-constrain', function(Y) {
var dd1 = new Y.DD.Drag({
node: '#dd-demo-1'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#dd-demo-canvas1'
});
});
So in the JS fiddle example above, if the box moves to the outer color, then the CSS applied to "dd-demo-1" should change from .dd-demo-inside to .dd-demo-outside.
I know YUI has a getXY() function but I wasnt sure how the best way to use it or what event it can be used on to make sure it is called once the dragging of the node is completed.
Any help you can provide would be much appreciated.
You can use the Node.inRegion method to test if the node is inside another node, passing true as the second parameter will ensure that it is fully inside the target region.
http://jsfiddle.net/ab1cjrcj/16/
YUI().use('dd-constrain', function(Y) {
var dragNode = Y.one('#dd-demo-1'),
innerCanvasNode = Y.one('#dd-demo-canvas3'),
dd1;
dd1 = new Y.DD.Drag({
node: dragNode
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#dd-demo-canvas1'
});
dd1.on('drag:end', function(e){
if (dragNode.inRegion(innerCanvasNode, true)){
dragNode.replaceClass('dd-demo-outside', 'dd-demo-inside');
} else {
dragNode.replaceClass('dd-demo-inside', 'dd-demo-outside');
}
//console.log(dragNode.inRegion(innerCanvasNode, true));
});
});
So i updated my own code. I subscirbed to the drag:end event--
dd1.on('drag:end', getOffsetTop);
Then I make a pure JS function that just checks for the offsetTop and offsetLeft. I think I should be able to create my own condition based on these values to change the class names.
Once you release you can call a function that uses javascript to retrieve the X and Y offset and update the class accordingly. Assuming you're using jQuery it could look something like this.
var offset = $(element).offset();
if(offset.left > x && offset.top > y) {
element.addClass(newClass);
}
I built onto your JSFiddle to show how it would work http://jsfiddle.net/ab1cjrcj/12/
hi i create simple app to display html page in webview i use the webview and display the page load time like this.
After this Disable the scroll and use the next and previous button to back and forward contain.
So my code is below.
First onCreate display add webview and load the html file.
mainWebView = (WebView) findViewById(R.id.mainWebView);
mainWebView.setVerticalScrollBarEnabled(false);
mainWebView.setHorizontalScrollBarEnabled(false);
mainWebView.getSettings().setJavaScriptEnabled(true);
mainWebView.setWebViewClient(new MyWebClient());
mainWebView.setPictureListener(new MyPictureClass());
mainWebView.loadUrl("file:///android_asset/chapter-001.html");
after use the MyWebclient Class for get the Height and width for mainwebview.
class MyWebClient extends WebViewClient
{
#Override
public void onPageFinished(WebView view, String url)
{
System.err.println("Page Finish Call");
lanscapHeight = protraitHeight = findHeight = mainWebView.getHeight();
System.err.println("Find Height->"+findHeight);
System.err.println("Portait Height->"+protraitHeight);
System.err.println("Landscap Height->"+lanscapHeight);
}
}
after this use the myPictureClass to get the webView contain length.
class MyPictureClass implements PictureListener
{
#Override
public void onNewPicture(WebView view, Picture picture)
{
proTraitContain = mainWebView.getContentHeight();
System.err.println("picture Class Call-->"+proTraitContain);
}
}
after this.create button next and previous to display the next and previous page.so use the SimpleOnGestureListener to Detect touch event.
btnNext = (Button) findViewById(R.id.btnNext);
btnNext.setOnTouchListener(this);
btnPrev = (Button) findViewById(R.id.btnPrev);
btnPrev.setOnTouchListener(this);
Override touch Method.
#Override
public boolean onTouch(View view, MotionEvent event)
{
if (view == btnNext)
{
btnClickFlage = true;
gestureDetector.onTouchEvent(event);
} else
{
btnClickFlage = false;
gestureDetector.onTouchEvent(event);
}
return false;
}
implement the SimpleGestureListener class as Below.
class MyGesture extends SimpleOnGestureListener
{
#Override
public boolean onSingleTapUp(MotionEvent e)
{
super.onSingleTapUp(e);
System.err.println("Display Total Contain For Protrait -->"+proTraitContain);
System.err.println("Before Height-->" + findHeight);
if (btnClickFlage)
{
if (findHeight > (proTraitContain+protraitHeight))
{
if(restProtraitFlag)
{
System.err.println("If part In side Flag-->"+findHeight);
findHeight=findHeight+protraitHeight;
restProtraitFlag=false;
//findHeight=findHeight+protraitHeight;
mainWebView.scrollTo(0, findHeight);
System.err.println("If part In side Flag-->"+findHeight);
}else
{
mainWebView.loadUrl("file:///android_asset/chapter-002.html");
restProtraitFlag=true;
}
}
else
{
if(protraitFlag)
{
if(findHeight==protraitHeight)
{
findHeight = protraitHeight;
}else
{
findHeight = findHeight + protraitHeight;
}
protraitFlag=false;
}else
{
findHeight = findHeight + protraitHeight;
}
mainWebView.scrollTo(0, findHeight);
}
}
else
{
restProtraitFlag=true;
if (findHeight<=0)
{
mainWebView.loadUrl("file:///android_asset/chapter-001.html");
System.err.println("Load Previous page");
}
else
{
findHeight = findHeight - protraitHeight;
mainWebView.scrollTo(0, findHeight);
}
}
System.err.println("After Height-->" + findHeight);
}
return true;
}
}
but i can't Display the last page of current html page path.now what to do.any solution please give.it's urgent.
i get the content width properly and use the scrollTo method to display but i can't do it.after last page rest of some contain can't display.
Please saw me the any way.
Thank in advance..
Hi Friends Finally i got my question answer.i use the ScrollTo method to scroll the contain and Display next contain of current page.but problem is there webView Display all contain according device.so all time contain display is higher then this current value.so i use the Webview.getScale(); method to Display how much scale use by webview.according to this i use this method and get current contain of webview in and use Display page wise.its finally its work for me..
Name For CalenderOuthenticationDe
Hello You have to put your HTML in res and then in that you have to keep it in raw after then you can access it like this...
webviewTips.loadUrl("file:///android_res/raw/tips.html");
You are showing the web page stored in your assets folder or from sd card.
So, My advice is that leave this approach and this way to show the web page to user..
And Edit your HTML files and put Anchor Tags in that...using that the user can traverse through the web page easily. (Example for that)
I have the following code to smooth animation on a collapsiblepanel, and it works splendidly:
<script type="text/javascript">
function pageLoad(sender, args) {
smoothAnimation();
}
function smoothAnimation() {
var collPanel = $find(("<%= CollapsiblePanelExtender.ClientID %>"));
collPanel._animation._fps = 30;
collPanel._animation._duration = 0.5;
}
</script>
Now, I also have a listview, separate from the above panel, that has a collapsible panel extender inside each of its items. I would like to apply that "smoothAnimation()" function to each of them, but I don't know how to do that, since databinding gives each item a unique ID.
Does anybody know how to approach this in javascript? Any help is greatly appreciated.
Use the OnItemCreated event, and use the following:
protected void ListItems_Created(object sender, ListViewItemEventArgs e)
{
CollapsiblePanelExtender cpe = (CollapsiblePanelExtender)e.Item.FindControl("collapsePanelID");
cpe.Attributes.Add("onload", cpe.ClientID + "._animation._fps = 30;");
cpe.Attributes.Add("onload", cpe.ClientID + "._animation._duration = 0.5;");
}
This code is untested but it's all you should need to get this working.