HTML DOM Drag and Drop - drag-and-drop

Yes, this may sound like a frequent question, but Google nor stackoverflow are giving me the answer that I want. I did stumble upon a few results on the WWW, but only found HUGE scripts for just this 1 piece of functionality.
The thing is, I remember doing this before, but I don't exactly remember how. I did it within ONE function and by adding event listeners and stuff along those lines.
Basically, I need a pure DOM script to drag and drop HTML elements for a throwback to older web browsers that don't support the new HTML5 standards. Must be down with the even 'onmousedown', and the text/image must be held for at least 1.5 seconds before calling the dragging.
Thoughts and ideas? Help would be greatly appreciated, guys.
I'm also a bit rusty with screen coordinates and stuff. With this code I want the text to follow the cursor EXACTLY. Not be like, 5 pixels "off" if you know what I mean.
What I had before (parameter of moveText is supposed to be an HTMLDivElement and it's innerText):
function moveText(t){
var id=t.id;
var interval=setInterval(function(){
increment=increment+1;
if(increment>=3){
clearInterval(interval);
t.addEventListener("mousemove",function(event){
t.style.position="absolute";
t.style.top=event.screenY+"px";
t.style.left=event.screenX+"px";
});
}
},500);
t.addEventListener("mouseup",function(){
increment=0;
clearInterval(interval);
});
}

Related

I need to create a Script in Unity 3D that change the text when I click a key button (1,2,3,4), then the text change

Example: A NPC greet you, and you have multiple choises that are questions for the NPC and if you want to know one answer of this questions, you click one button (1,2,3,4). Then the text change and give you the answer of the question.
I'm going to assume you have already set up your GUI and NPC Script.
Getting when a key is pressed is pretty simple in Unity: Use UnityEngine.Input
Example of use:
if(Input.GetKeyDown(KeyCode.Alpha1)) {
//do something
}
This is a basic example.
Input.GetKeyDown returns true only when the key is pressed at that specific moment of checking (the frame). KeyCode.Alpha1 is the key for '1' at the top of alphanumeric keyboards.
To get when the key is held down, for jumping or running, use Input.GetKey instead. This will be true if the key is held down at that instance, instead of only one at the beginning.
To get when the key is released, use 'Input.GetKeyUp'. This only runs once the key is let go.
For setting the color of a Textbox, use yourTextBox.color. I believe it works with both legacy Textboxes and TextMeshPro.
The way to do what you have is this:
In the Update call, check if an NPC is talking with the player.
If so, then check if the player has pressed 1 ,2, 3, or 4, using Input.GetKeyDown. (To make it nicer looking, have each option in a list and use the index of the result. KeyCode is an enum, so you can save it like any other variable.)
Call some function that returns the response to the answer. Return a string or something.
Override the text in the Textbox with the answer, and use yourTextBox.color to set the color as you wish.
This should cover it. I may have some typos or errors, but the basic principals should work. Also, make sure you implement it in a way that makes it easier to edit later. You don't want to write code that can't be added on later, trust me...

cannot find css element in protractor

How do I locate the element with the following html, I have 4 Start buttons each in different color. I tried using css by class and is not working. There are no unique ids as well. Pls help
Start
As Ben Mohorc points out, you really need to give us a bit more to go on. But if you are saying there are multiple start buttons, but only one of each color, it ought to look like this. For now I assume all they say is "Start". If that is only part of what they say, use partial buttontext.If it is background color that differs, you may need to adapt that, too.
var coloredButton = element.all(by.buttonText('Start')).filter(function(elem) {
return elem.getCssValue('color').then(function(color) {
return (color == '#00ff00')//fill in the desired color here, in this format
})
});
Then do your stuff on coloredButton.first(), which will be the only one, according to what you are saying.
For more on the format to expect from the color, see http://www.protractortest.org/#/api?view=webdriver.WebElement.prototype.getCssValue

dc.js chart.select function

I am new to dc.js. And I refer to the API Reference and see the chart.select function. But I do not know how to use it.
Such as I have a piechart and I want to have the value and percentage showing in the div below the chart. Could some one tell me if this can be realized using chart.select?
chart.select is for selecting some elements in the d3 or CSS selector sense, if you want to apply some attributes. It probably won't help you directly.
What you are probably looking for is the filtered event, which will tell you when items have been selected. Then you can read the filters and display them elsewhere like so:
chart.on('filtered.some_id', function() {
d3.select('#your-div').text(chart.filters().join(','));
});
(There are also ways to respond directly to interaction events, but I think this is more to the point for what you're trying to do.)

QCompleter and Tab key

I'm trying to make a Completion when pressing tab, you get the first completion of all possibilities.
But, in a QWidget-based main window, pressing tab will make that QLineEdit lost focus, and completion popup hides after that.
Is there a way to fix it ?
Have you tried to subclass QLineEdit and intercept the key press event?
Alternatively you could set up an event filter.
Whew. It took me some time to figure this out :) Multiple times I have tried to solve this problem, but always gave up. Now, I dug enough to find the answer.
OP, please pardon me, because the code here is Python, but should be understandable and work for C++ as well.
Basically, the problem I had was "how to select an entry in the QCompleter"; I didn't notice before, but the answer is in the popup() method. QCompleter works with a model and a view, which contains the things to show.
You can change the current row as you wish, then get the index of that row in the model, then select it in the pop-up.
In my code, I subclassed QLineEdit, created a tabPressed signal which is emitted every time Tab is pressed. Then, connected this signal to a method of the same class which does this:
get the current index;
select the index in the popup;
advance to the next row.
As implementation, this is very trivial, but for my current purpose this is enough. Here's the skeleton (just for the tab part, it's missing the model and everything else).
class MyLineEdit(QLineEdit):
tabPressed = pyqtSignal()
def __init__(self, parent=None):
super().__init__(parent)
self._compl = QCompleter()
self.tabPressed.connect(self.next_completion)
def next_completion(self):
index = self._compl.currentIndex()
self._compl.popup().setCurrentIndex(index)
start = self._compl.currentRow()
if not self._compl.setCurrentRow(start + 1):
self._compl.setCurrentRow(0)
def event(self, event):
if event.type() == QEvent.KeyPress and event.key() == Qt.Key_Tab:
self.tabPressed.emit()
return True
return super().event(event)
You may need to adjust/fix few things, but this is the basic idea.
EDIT:
For details see
http://www.qtcentre.org/threads/23518-How-to-change-completion-rule-of-QCompleter
There's a little issue: when Return is pressed, the things don't work properly. Maybe you can find a solution to this problem in the link above, or in the referenced resources therein. I'll fix this in the next few days and update this answer.
There is probably a better solution but one that comes to mind is to change the focus policy for all other widgets on the form to something that doesn't include "tab" focus. The only options that don't use the tab key are Qt::ClickFocus and Qt::NoFocus.

SliderExtender Reset

I would think this would be simple... or that atleast someone else would desire the same thing, but I am unable to find any documentation anywhere...
I have a form with 7 text boxes and 5 sliderextenders on 5 of them... im using jquery, and a client side input button to reset the form on the client side... i can reset the values of the text boxes easily, but the sliderextenders will not reset to their default position or their "actual" value... any ideas?
omg.. pretty easy actually.
function ResetForm() { $find('behaviorID').set_Value(0); }