jquery drag n drop not working please review my code

StackOverflow https://stackoverflow.com/questions/23264270

  •  08-07-2023
  •  | 
  •  

Frage

I have three buttons and I want to drag it in droppable div but it is not working. Please review my code and suggest me for best

<body>
   <form method="post" action="Dashboard.aspx" id="form1">
   <script type="text/javascript">

      $('#play1').draggable();
      $('#Yasin2').draggable();
      $('#page3').draggable();
      $('#page24').draggable();

      $('#divScene').droppable({
      drop: function (event, ui){
      var ID = $(ui.draggable).attr('id');
      alert(ID);
      }
   });
  </script>

  <div>
    <input type="submit" name="btnAddScene" value="Add" id="btnAddScene" style="float:right; height: 26px;">
     <h1>Scene(s)</h1>
  </div>

  <div id="divScene" class="ui-droppable" style="border-style:solid; border-width:5px; padding:20px 20px 20px 20px;">
<input type="button" class="ui-draggable" name="play1" value="play" onclick="return false;__doPostBack('play1','')" id="play1" class="ui-widget ui-state-default ui-corner-all" title="Scene">
<input type="button" class="ui-draggable" name="Yasin2" value="Yasin" onclick="return false;__doPostBack('Yasin2','')" id="Yasin2" class="ui-widget ui-state-default ui-corner-all" title="Scene">
<input type="button" class="ui-draggable" name="page3" value="page" onclick="return false;__doPostBack('page3','')" id="page3" class="ui-widget ui-state-default ui-corner-all" title="Scene">
<input type="button" class="ui-draggable" name="page24" value="page2" onclick="return false;__doPostBack('page24','')" id="page24" class="ui-widget ui-state-default ui-corner-all" title="Scene">
   </div>

  </form>
 </body>
</html>
War es hilfreich?

Lösung 2

Mistake is draggable and droppable does not work on button it works only on div.

Andere Tipps

Firstly, you need to include jQuery and jQuery UI in your page:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

After that,you need to wrap your jQuery code inside DOM ready handler $(function() {...}); to make sure all of your DOM elements have been loaded properly before executing your jQuery code:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
    $(function () {
        $('#play1').draggable();
        $('#Yasin2').draggable();
        $('#page3').draggable();
        $('#page24').draggable();

        $('#divScene').droppable({
            drop: function (event, ui) {
                var ID = $(ui.draggable).attr('id');
                alert(ID);
            }
        });
    });
</script>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top