dragular.js: Nested Elements and Adding New Elements - dragula

Does anybody know how nested elements and add new elements in dragula.js work together?
I've come this far: nested elements works, adding elemnts works, too, but I can't move a nested element into an new element:
https://codepen.io/BerndBammer/pen/NLMKpN
How can I destroy dragula and refresh it?
thx & best regards,
Bernd

Got it, I updated the CodePen, works now fine

Related

Quasar Intersection search and filter

I am trying to create a filter/search possibility for a QIntersection in Quasar.
Preferably in the same style as a QTable, where it searches through an entire JSON.
My goal is to use a v-for loop over a JSON to create all intersection items, with a QSelect that gives the possibility for searching and filtering.
Anyone suggestions on how to approach this the best?
#Matthias S thanks your suggestion works perfectly.

Vuejs directive masonry detect prepend to array and redraw properly

I am using the vue-masonry plugin which let me create a masonry grid easily.
I created a system of infinite loading where you scroll to the bottom of the page and it append new pictures to an array binded with the vue-masonry plugin.
The problem happen when I created a system of polling for the new pictures that were upoaded by other users. Those new pictures need to be at the top of the masonry grid.
The plugin use two Vue Directive masonry (parent) and masonryTile (element). masonryTile has a v-for which loop through the array binded with my Vue instance (which does all the heavy lifting, preloading, sanityzing, etc...).
Is there a way in the directives to know the differences between something being appended or prepended? And try to react differently (I know masonry has some append/prepend method) but in here and with this plugin, the items where already added (at the beginning so the prepend works with Vue) but there's no masonry interaction nor redraw (I tried to use the prototype to trigger the redraw this.$redrawVueMasonry();).
So I don't know what's next to do. Continue finding a way to differentiate a prepend from a append and trying to bind it to the respective masonry's methods ? Or another method that I didn't think of...
Thanks in advance for you help
Ps : I don't think my code is really relevant since It's more a way to optimize the plugin. If you want some specific part of my code anymay, tell me in the comment !
This probably comes a bit too late, this being a 10 month old question.
However vue-masonry is able to handle situations where items are spliced anywhere in the array. But to properly update the grid this.$redrawVueMasonry() should be called inside this.$nextTick() like this:
this.$nextTick(() => this.$redrawVueMasonry());
Hope this helps, if not the original poster, someone else.

Protractor dragAndDrop not working

I have tried all possible ways for drag and dropping the elements available in the below link,
https://the-internet.herokuapp.com/drag_and_drop
But i am unable to achieve drag and drop the elements between two boxes.
Methods i tried so for
1.browser.actions().mouseMove(a).mouseDown().mouseMove(b).mouseUp().perform()
2.browser.actions().dragAndDrop(a,b).perform()
3.browser.driver.actions().dragAndDrop(a,{x:1000,y:0}).perform();
All the above methods are not working. Can some one figure out the possible work around for achieve dragAndDrop function on the elements.
Thanks in advance!!

SVG and selenium

Hej Guys
I an using google visualization api to draw stacked bar chart. Its all fine but now i want to test it with selenium but having a hard time finding the elements in the google chart.
For example i want to click on the chart element but everytime i try to find an element by xpath i get exception "OpenQA.Selenium.NoSuchElementException: The element could not be found"
I read that with selenium its tricky to click on the svg images.
Is there anybody who know a solution cuz i m kind of desprate and i havent find a suitable solution on the net by myself.
My chart looks like this:
http://i48.tinypic.com/21o4swx.png
What i am trying todo is:
webdriver.Navigate().GoToUrl("http://localhost:59777/Tests/TestsMainView");
IWebElement element = webdriver.FindElement(By.XPath("/html/body/div/div[2]/div[2]/iframe/html/body/div/svg/g[2]/g/g[2]/rect[5]"));
Actions myAction = new Actions(webdriver);
myAction.Click(element).Perform();
Thread.Sleep(9999);
Thanks :)
Here is some advice that may help you. First your second line of code is should be
WebElement element = webdriver.FindElement(By.xpath("//img[contains(#src,'http://i48.tinypic.com/21o4swx.png')]"))
You had "IWebElement" (this was probably just a typo in your question). I changed the way the element is found searching for matching element instead of starting at the top level and working down. This is a better practice to narrow down the element you are attempting to interact with so that changes to the code don't instantly break your test. Also unless you start an xpath expression off with "//" or "xpath=" selenium Webdriver will not recognize it so even if your path never changed selenium Webdriver wouldn't be able to find it.
If I understand what you are trying to do then you can also remove lines 3-5 and replace them with the following,
element.click();
This will have selenium Webdriver zoom in on the chart provided by your link. I hope this helps
I noticed xpath cannot select anything within an svg tag. I managed to find elements using className or tagName selectors instead or you could even try cssSelectors but I am not sure about that one. Note that you can still use xpath to access parents of a node inside an svg using:
By.xpath("..");
Hope that will help.

Trying to make dynamically created element draggable

I'm trying to create a dynamic input element that is draggable. Now the problem is I create an element but when I use something like
$("#in"+index.toString()).draggable({cancel:true});
after I append it to the container div, it's not working. Basically it's not working for the dynamically created input element of a certain id. Here's the code and please feel free to point out problems. I could really use some help on this one. Thanks!
http://jsfiddle.net/ithril/hRCun/5/
The problem is that you are creating a new element that is not bound to the UI functions. I would suggest using clone(true,true) and then changing the parameters of the cloned element as need be. You can learn more about clone here. http://api.jquery.com/clone/