Click here to Skip to main content
15,868,016 members
Home / Discussions / JavaScript
   

JavaScript

 
AnswerRe: I have problem importing images of Json File on HTML Table Pin
Jeremy Falcon24-Jan-23 4:30
professionalJeremy Falcon24-Jan-23 4:30 
Questionsoftware access control Pin
Member 1589900419-Jan-23 0:51
Member 1589900419-Jan-23 0:51 
AnswerRe: software access control Pin
Richard Deeming19-Jan-23 1:25
mveRichard Deeming19-Jan-23 1:25 
QuestionUse async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206711-Jan-23 23:35
Member 1589206711-Jan-23 23:35 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 0:02
mveRichard Deeming12-Jan-23 0:02 
QuestionRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206712-Jan-23 1:38
Member 1589206712-Jan-23 1:38 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 2:31
mveRichard Deeming12-Jan-23 2:31 
PraiseRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206712-Jan-23 3:17
Member 1589206712-Jan-23 3:17 
GeneralRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 3:39
mveRichard Deeming12-Jan-23 3:39 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Jeremy Falcon12-Jan-23 8:44
professionalJeremy Falcon12-Jan-23 8:44 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Leon Scott Kennedy13-Jan-23 5:25
Leon Scott Kennedy13-Jan-23 5:25 
QuestionJava Script Pin
Prerna Kharbanda3-Jan-23 20:56
professionalPrerna Kharbanda3-Jan-23 20:56 
AnswerRe: Java Script Pin
Richard MacCutchan3-Jan-23 21:33
mveRichard MacCutchan3-Jan-23 21:33 
Questioncalendar validation Pin
Jithin P 202227-Dec-22 20:45
Jithin P 202227-Dec-22 20:45 
AnswerRe: calendar validation Pin
Dave Kreskowiak28-Dec-22 3:59
mveDave Kreskowiak28-Dec-22 3:59 
AnswerRe: calendar validation Pin
Jithin P 202229-Dec-22 3:31
Jithin P 202229-Dec-22 3:31 
AnswerRe: calendar validation Pin
Jeremy Falcon5-Jan-23 11:13
professionalJeremy Falcon5-Jan-23 11:13 
AnswerRe: calendar validation Pin
Jeremy Falcon5-Jan-23 11:17
professionalJeremy Falcon5-Jan-23 11:17 
Questionhow to modify cloned element draggable attribute ? Pin
VernonM23-Dec-22 10:37
VernonM23-Dec-22 10:37 
AnswerRe: how to modify cloned element draggable attribute ? Pin
VernonM23-Dec-22 14:57
VernonM23-Dec-22 14:57 
AnswerRe: how to modify cloned element draggable attribute ? Pin
VernonM24-Dec-22 2:43
VernonM24-Dec-22 2:43 
GeneralRe: how to modify cloned element draggable attribute ? Pin
VernonM25-Dec-22 3:51
VernonM25-Dec-22 3:51 
QuestionNeed Help with Drag n Drop... Pin
VernonM21-Dec-22 10:26
VernonM21-Dec-22 10:26 
AnswerRe: Need Help with Drag n Drop... Pin
Richard Deeming21-Dec-22 21:26
mveRichard Deeming21-Dec-22 21:26 
GeneralRe: Need Help with Drag n Drop... Pin
VernonM22-Dec-22 5:50
VernonM22-Dec-22 5:50 
Richard Thank you very much...

Ah yes , id="" .
Originally , I used this code:

JavaScript
<script>
    var container = document.querySelector("#itemContainer");
    var activeItem = null;

    var active = false;

    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);

    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);

    function dragStart(e) {

      if (e.target !== e.currentTarget) {
        active = true;

        // this is the item we are interacting with
        activeItem = e.target;

        if (activeItem !== null) {
          if (!activeItem.xOffset) {
            activeItem.xOffset = 0;
          }

          if (!activeItem.yOffset) {
            activeItem.yOffset = 0;
          }

          if (e.type === "touchstart") {
            activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
            activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
          } else {
            console.log("Dragging something!");
            activeItem.initialX = e.clientX - activeItem.xOffset;
            activeItem.initialY = e.clientY - activeItem.yOffset;
          }
        }
      }
    }

    function dragEnd(e) {
      if (activeItem !== null) {
        activeItem.initialX = activeItem.currentX;
        activeItem.initialY = activeItem.currentY;
      }

      active = false;
      activeItem = null;
    }

    function drag(e) {
      if (active) {
        if (e.type === "touchmove") {
          e.preventDefault();

          activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
          activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
        } else {
          activeItem.currentX = e.clientX - activeItem.initialX;
          activeItem.currentY = e.clientY - activeItem.initialY;
        }

        activeItem.xOffset = activeItem.currentX;
        activeItem.yOffset = activeItem.currentY;

        setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
      }
    }

    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
  </script>


But the Cursor keeps loosing the Target , as you can view here ,
https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder-1-Note-4-Frets-FORUM.html
Forcing me to keep going back and Grabbing Target again & again .
Which forces me to Drag at a sloth's pace .
Otherwise it works fine for class= .

So I was trying to find a better/FASTER solution , as in RedDot code above ;
unfortunately , I forgot the id= business .

Why not use id= as in here :
https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder.html
If you view the html source , you will see that every .item has 6-duplicates ;
which turns out to be 7 x 7 = 49 .items .
So if I use id= I'll have to code 49 unique id='s .

So , I plan to Post a new thread , asking 'For a.js vs b.js , why is a.js so much Faster than b.js ? ' .
Faster meaning , "NOT Grabbing Target again & again " .
Sound reasonable ?

Thanks for your Help...

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.