function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
vandana.midha@ivanik.comvandana.midha@ivanik.com 

Time table

Hi ,

 

I want to create a application that will help in creating time tables so Is there any way I can use my drag and drop facility to create that ?

 

or any other suggestions for the same.

 

Regards

Vandana

Ajay K DubediAjay K Dubedi
Hi,

You can use JQuery for achieving Drag and Drop functionality into your Page. You have to
load JQuery libraries into your page and you can easily access jQuery methods.
You can Prefer the links-
https://jquery.com/
https://jqueryui.com/
If you don't want to use JQuery you can do the same thing by Javascript too. please go with the
link-
https://www.w3schools.com/htmL/html5_draganddrop.asp
  
<html>
  <head>
    <style>
      #div1 {
        width: 350px;
        height: 70px;
        padding: 10px;
        border: 1px solid #aaaaaa;
      }
    </style>
    <script>
      function allowDrop(ev) {
        ev.preventDefault();
      }

      function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }

      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>
  <body>

    <p>Drag the W3Schools image into the rectangle:</p>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <p id="drag1" draggable="true" ondragstart="drag(event)">Drag me!!!!!</p>

  </body>
</html>
You can see the above code with drag and drop funtionality.
 
I hope you find the solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi