How to invoke ondragstart and drop event manually javascript - javascript

I have used html ondragstart and ondrop events.
<div class="row height_380_div" id="target_div_id" ondragover="drag_over(event)" ondrop="drop(event)">
<div ondragstart="dragStart(event)" class="alert alert-warning col-lg-12 height_30_div node" draggable="true" id="call" name="Call" >
<button class="close top_min_10 hidden call_btn" data-dismiss="alert" onclick="remove_btn(this)">
×</button><p class="top_min_10">Call</p>
</div>
</div>
I want to drag and drop this dynamically on page load. Means for example, the div should be dragged to 100 px left and dropped there, which should be called dynamically when page loads and it should run on its own. How to do that?

posted 6 year ago ((( ... anyways, if anyone needs it Ill leave it here ))
// add listenner to element
someElement.addEventListener('dragstart', () => '...do something');
// fire the custom event (I didn't check it in action, but it worked in my unit
//tests so )))
const dragEvent = new Event('dragstart');
someElement.dispatchEvent(dragEvent);

Related

Focus an element within a ShadowDOM

I have a modal dialog created within a Shadow DOM and injected (using violentmonkey) into a page during document load. This dialog contains a simple form. The idea is to prompt the user for input.
When the dialog is created, it has focus. Elements can be tabbed, and I can hook key/mouse events. The problem arises when the window load event is triggered. Focus returns to the main body (verified by issuing document.activeElement in the console and by hooking focusin/out for both body and the shodowroot). I can hook the focusin event, but so far nothing I have tried will return focus to my dialog.
A cut down version of the dialog:
<div id="twifty-translate-dialogue" style="">
#shadow-root (open)
<div class="outer" style="z-index: 2147483647; pointer-events: none;">
<div class="container">
<div id="header" class="">
</div>
<div id="languages" class="">
</div>
<div class="buttons">
<button id="translate" class="button-translate" type="button">Translate</button>
<button id="cancel" class="button-cancel" type="button">Cancel</button>
</div>
</div>
</div>
I would expect the following to work:
window.onload = () => {
document.getElementById("twifty-translate-dialogue").shadowRoot.getElementById("translate").focus()
}
From what I've read, there should be two active elements. The #twifty-translate-dialogue and the shadow DOMs #translate. But:
document.activeElement
> <body>
document.getElementById("twifty-translate-dialogue").shadowRoot.getElementById("translate").focus()
document.activeElement
> #twifty-translate-dialogue
document.getElementById("twifty-translate-dialogue").shadowRoot.activeElement
> null
How can I restore focus?
Update:
A workaround:
window.onload = () => {
window.setTimeout(() => {
this.shadow.getElementById("translate").focus()
}, 1)
}
I'm guessing that the focus changes after the onload event, meaning that trying to set the focus in the handler will have no effect. By using a timeout, I've scheduled the focus call for after the completion of onload.
Is this a bug or standard behaviour? Is there a prefered way of setting the focus?

Two buttons created by php, chose one event over the other JavaScript

I'm setting up a quiz where I can choose the number of questions to be populated by php.
When the last question is cleared it displays a new content.
But I'd like to display it only when one of the button is clicked.
Because the buttons are populated with php I can't use a custom ID.
So I'd like to trigger an event (a popup window) if one of the button is click and stop the event that display the next content.
Unfortunatly I can't achieve this.
Tried to use event.propagation, but my knowledge in coding is so low I don't even know what I do.
$(document).on("click", "#q3a2", function newPopup(url) {
popupWindow = window.open(
"./gluck.html",'popUpWindow','height=10vh,width=auto,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
});
if ($(".questionStep").length <= 0 ) {
$("#Box1").hide();
$("#NewContent").show();
}
<div id="Box1" class="cearfix" style="">
[…]
<article id="step3" class="questionStep clearfix" data-step="3" style="">
<button onclick="scrollToTop()" class="stepButton yesBtn s3" data-step="3" id="q3a1">Yes</button>
<button onclick="scrollToTop()" class="stepButton yesBtn s3" data-step="3" id="q3a2">No</button>
</article>
</div>
At the moment I can pop up the window but the newcontent is displayed. I'd like it to stay hidden until q3a1 is clicked.
Thanks

Get clicked element in Meteor?

I have HTML in the following format:
<div class="panel panel-1 active" data-chart="flight-chart">
<div class="row panel-header">
<div class="col-sm-3"><i class="fa fa-plane fa-4x"></i></div>
<div class="col-sm-9">
<div class="big">123,673</div>
<div class="small">flights added since 3/3/2016</div>
</div>
</div>
<div class="panel-footer">view more information</div>
</div>
I am capturing click events using the code below:
Template.infoPanel.events
'click .panel': (event, instance) ->
console.log 'panel click',event.target
The issue I am having is that depending on where in the .panel div I click, a different element is returned for event.target. So If I click on the .col-sm-9 div, that will be returned as the target even though the event is targeting it's parent .panel. Same goes for clicking on .panel-footer.
How can I get the .panel element 100% of the time from inside of the click event?
Use currentTarget instead:
console.log 'panel click', event.currentTarget
See the Event Maps section of the docs for more details.

JS - How to make Boxes collapsable in AdminLTE ( is using Bootstrap) when Content dynamical loaded

I'm using the AdminLTE Skin from https://almsaeedstudio.com/
I want to load the page content dynamically when clicking on the menu on the left side. I made this via jQuery:
<li><i class="fa fa-circle-o"></i>Test</li>
But when in Test.php is a collapsable box like this:
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-medkit"></i>
<h3 class="box-title">Test Box</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="box-body">TestContent</div>
</div>
The box is not collapsable when I click on the button nothing happens.
When I don't load the Content dynamically the button is usable. What is the matter here?
Thanks for your help.
I'm facing the same situation.
When I was looking for a workaround I've managed to discover what seems to be the real problem.
If you take a good look at app.js you'll see that there are many activate methods that scan the page to find out if a component is been used and then transforms or injects the behavior for the component.
That seems to be the case to boxes (Collapsable and closeable ones at least).
If you reload the script ($.getScript(app.js)) the box will work, but unfortunately other components will stop working (sidebar and control-sidebar).
If you want just the boxes to work inside de content-wrapper, one way is to call:
$.AdminLTE.boxWidget.activate();
You can do this on the $(document).ready() function of your content.
I'm still finding a better way to do this, but as far as boxes go, this should do the work.
Regards,
Jonatan Neves
I ran into the same issue, and ended up changing app.js so that the box widget listeners are on the document instead of the actual elements found when activate() is called. This guarantees dynamically added elements will be found:
$.AdminLTE.boxWidget = {
selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
activate: function () {
var _this = this;
//Listen for collapse event triggers
$(document).on('click', _this.selectors.collapse, function (e) {
e.preventDefault();
_this.collapse($(this));
});
//Listen for remove event triggers
$(document).on('click', _this.selectors.remove, function (e) {
e.preventDefault();
_this.remove($(this));
});
},
//...
}

Separate touch events of parent and child

I use jquery for my web application. I want it to be correct for desktop browsers and mobile brousers for touchscreen devices.
I have a div, and some elements inside it:
<div class="well listItem element-div alert-error" data-state="removing">
<strong>Item title</strong> <small>Items count</small>
<div class="pull-right" style="margin-top: -5px;">
<a class="btn btn-success approve-button"><i class="icon-ok icon-white"></i></a>
<a class="btn btn-danger cancel-button"><i class="icon-remove icon-white"></i></a>
</div>
</div>
I catch click and touchend event for .listItem class (top-level div) and same events for every a element (for .approve-button and .cancel-button), but when I'm click on desktop browser on 'a' element, it works correct, and when I am pressing on 'a' element in iOS Safari browser, or WindowsPhone InternetExplorer, works only event for parent div, but not for 'a'. If I remove event listener for parent div, events for 'a' elements works correct in mobile browsers. I want parent-div event works when I touch a free space of it, and when I touch 'a' element - I want only 'a' event listener to go on. Can you advise me how to separate them?
Have you tried to check event target?
$(".listItem").on("click", function(event){
if (event.target === this) {
// clicked exactly on this element
}
});
I've had a similar problem, only my content was more nested. You want to exclude the areas (divs, classes or otherwise) where you expect to handle other events, using :not selector, like so:
<article>
<div class="title">
<span class="title"></span>
<div class="buttons">
<div class="minimize">+</div>
<div class="remove">x</div>
</div>
</div>
<div class="post">
...
</div>
</article>
With jQuery:
$("article :not(.buttons, .minimize, .remove)").click(function (event) {
// toggle display value of div.post
});
This triggers a click event anywhere inside article, except for the .buttons, .minimize and .remove divs.

Categories