After testing-and when I discover that it works-I change them to white, then 99% transparency). The DropTarget component marks a drop zone for the dragged element. You can use the Draggable component to allow the elements to be moved. (While editing and testing, the 'drop' rectangles are red and yellow to ensure the best spot. The Kendo UI for jQuery Draggable and Kendo UI for jQuery DropTarget components provide options to enable the drag-and-drop feature for different elements. I even changed the drop shapes from circles to rectangles to fit the icon's height, and that didn't work either. I've changed the arrangement several times (sending to front/back/forward/backward) ungrouping, regrouping. ![]() I can't figure out why the other circles aren't being recognized as possible drop spots, or why the drop spots are so off-kilter. But I changed the drag and drop option setting to "free" to allow the users to put the icon anywhere, and even when the icon is on the EXACT SPOT, the answer is marked incorrect. I would prefer the drop areas to "snap" to ensure the learner is at a designated spot. Anytime I try to drop the vehicle onto any of the other circles, the group jumps back to "circle_front" as if it's the only drop spot. But now, when I test it in preview mode, I am only able to drop the group to one of the drop circles (circle_front, for example). I created a solid icon so the learners can click and drag from anywhere on the vehicle, not being restricted to dragging from the icon's outline. My testers didn't like that they couldn't drag from anywhere within the vehicle. Because the icon is transparent, you can't drag from "inside" the icon, there is nothing to click there. So the learners had to drag the vehicle from the "outline" of the icon. I used an icon that had a transparent background. I was dragging and dropping onto three different spots easily. So I created a fourth circle in the center of the icon, grouped those items together, and made all the circles 99% transparent. I set the question to drag the group to the drop circles and this configuration worked great. Dragging the icon itself into the three possible spots didn't work. I created three circles that were the possible spots (circle_front circle_on circle_behind). There are several issues going on so here goes.ฤก. Javascript drag and drop algorithm - Online HTML editor can be used to write HTML and CSS code and see results. There are three possible spots, only one correct spot based on the vehicle type. These questions are asking the learners to drag an icon of a vehicle onto the proper location of a piece of machinery. ![]() I'm having a problem with a drag-and-drop interaction. This is a bit of a long explanation so please bear with me.
0 Comments
Leave a Reply. |