What's new

Help In this html code, is it possible?

C

carmona1426

Honorary Poster
Established
In this html code, is it possible to make this pop up fieldset with table draggable using jQuery?
Here is the html code below:

HTML: 
<td>
                          <input type="text" class="form-control rounded-0" name="item_code[]" ng-model="ir.item_code"
                            ng-click="showDropdown3 = !showDropdown3; selectedRowIndex = $index"
                            placeholder="Click to select." style="border: 4px double white; cursor: pointer"
                            autocomplete="off">
                          <fieldset id="fieldset{{$index}}" class="table-like-dropdown border p-2 bg-gradient-info"
                            ng-if="showDropdown3 && selectedRowIndex === $index" ng-hide="ir.item_code"
                            style="position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; width: 500px;">
                            <span class="mb-1">
                              <i class="fas fa-info-circle mr-1"></i>Press Esc key to close
                            </span>
                            <input type="text" class="form-control" ng-model="searchText" placeholder="Search here..."
                              style="border:2px solid #C04000">
                            <table class="table table-bordered">
                              <thead>
                                <tr>
                                  <th class="text-center">Item Code</th>
                                  <th class="text-center">Description</th>
                                </tr>
                              </thead>
                              <tbody class="bg-light">
                                <!-- Display "No Data Available" message -->
                                <tr ng-show="!isDataAvailableInTable()">
                                  <td colspan="2" class="text-center text-danger font-weight-bold">No Data Available
                                  </td>
                                </tr>
                                <!-- Display data if available -->
                                <tr ng-repeat="i in itemData | filter: searchText"
                                  ng-if="trimText(i.item_classif) == trimText(classification1) && i.item_moduleType == 'SUPPLIES' && i.item_receiving == tradeType"
                                  ng-click="selectItemForRow(i, selectedRowIndex)"
                                  ng-style="{ 'background-color': hoverRowIndex === $index ? '#3498eb' : 'transparent', 'transition': 'background-color 0.2s' }"
                                  ng-mouseenter="hoverRowIndex = $index" ng-mouseleave="hoverRowIndex = null"
                                  style="cursor: pointer;">
                                  <td class="pl-4" width="17%">{{i.item_code}}</td>
                                  <td width="50%">{{i.item_shortDesc}}</td>
                                </tr>
                              </tbody>
                            </table>
                          </fieldset>
                        </td>
 
Sort by date Sort by votes
Yes, it is possible to make the fieldset with the table draggable using jQuery. You can achieve this by adding some jQuery code to your HTML file.

First, include the jQuery library in your HTML file by adding the following script tag before the closing </body> tag:

HTML: 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Next, add the following jQuery code to make the fieldset draggable:

JavaScript: 
<script>
  $(function() {
    // Make the fieldset draggable
    $("fieldset").draggable();
  });
</script>

Make sure to add this code after including the jQuery library.

With this code in place, the fieldset with the table will become draggable on the page. You can click and drag it around the screen.
 
Upvote 0 Downvote
🤖 said:
Yes, it is possible to make the fieldset with the table draggable using jQuery. You can achieve this by adding some jQuery code to your HTML file.

First, include the jQuery library in your HTML file by adding the following script tag before the closing </body> tag:

HTML: 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Next, add the following jQuery code to make the fieldset draggable:

JavaScript: 
<script>
  $(function() {
    // Make the fieldset draggable
    $("fieldset").draggable();
  });
</script>

Make sure to add this code after including the jQuery library.

With this code in place, the fieldset with the table will become draggable on the page. You can click and drag it around the screen.
Click to expand...
I already tried this but its not working is there another way? or maybe the cause is the position its fixed thats why its not draggable but when I removed the fixed position its still not working! Is there another way using css styling?
 
Upvote 0 Downvote
carmona1426 said:
I already tried this but its not working is there another way? or maybe the cause is the position its fixed thats why its not draggable but when I removed the fixed position its still not working! Is there another way using css styling?
Click to expand...
If the draggable functionality is not working with the fixed position, you can try using CSS styling to make the element draggable. Here's an alternative approach using CSS:

1. Add the following CSS class to your stylesheet:

CSS: 
.draggable {
  cursor: move;
  position: absolute;
}

2. Remove the style="position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; width: 500px;" attribute from the fieldset element.

3. Add the draggable class to the fieldset element:

HTML: 
<fieldset id="fieldset{{$index}}" class="table-like-dropdown border p-2 bg-gradient-info draggable"
  ng-if="showDropdown3 && selectedRowIndex === $index" ng-hide="ir.item_code">
  <!-- Rest of the fieldset code -->
</fieldset>

4. Add the following JavaScript code to your HTML file, preferably before the closing </body> tag, to enable dragging functionality:

JavaScript: 
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const fieldsets = document.getElementsByClassName("draggable");

    Array.from(fieldsets).forEach(function(fieldset) {
      let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      fieldset.addEventListener("mousedown", dragMouseDown);

      function dragMouseDown(e) {
        e.preventDefault();
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.addEventListener("mousemove", elementDrag);
        document.addEventListener("mouseup", closeDragElement);
      }

      function elementDrag(e) {
        e.preventDefault();
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        fieldset.style.top = (fieldset.offsetTop - pos2) + "px";
        fieldset.style.left = (fieldset.offsetLeft - pos1) + "px";
      }

      function closeDragElement() {
        document.removeEventListener("mousemove", elementDrag);
        document.removeEventListener("mouseup", closeDragElement);
      }
    });
  });
</script>

With this code in place, the fieldset element should be draggable by clicking and dragging it on the page. The JavaScript code adds event listeners for mouse events, allowing the element to be dragged around the screen.
 
Upvote 0 Downvote
🤖 said:
If the draggable functionality is not working with the fixed position, you can try using CSS styling to make the element draggable. Here's an alternative approach using CSS:

1. Add the following CSS class to your stylesheet:

CSS: 
.draggable {
  cursor: move;
  position: absolute;
}

2. Remove the style="position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; width: 500px;" attribute from the fieldset element.

3. Add the draggable class to the fieldset element:

HTML: 
<fieldset id="fieldset{{$index}}" class="table-like-dropdown border p-2 bg-gradient-info draggable"
  ng-if="showDropdown3 && selectedRowIndex === $index" ng-hide="ir.item_code">
  <!-- Rest of the fieldset code -->
</fieldset>

4. Add the following JavaScript code to your HTML file, preferably before the closing </body> tag, to enable dragging functionality:

JavaScript: 
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const fieldsets = document.getElementsByClassName("draggable");

    Array.from(fieldsets).forEach(function(fieldset) {
      let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      fieldset.addEventListener("mousedown", dragMouseDown);

      function dragMouseDown(e) {
        e.preventDefault();
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.addEventListener("mousemove", elementDrag);
        document.addEventListener("mouseup", closeDragElement);
      }

      function elementDrag(e) {
        e.preventDefault();
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        fieldset.style.top = (fieldset.offsetTop - pos2) + "px";
        fieldset.style.left = (fieldset.offsetLeft - pos1) + "px";
      }

      function closeDragElement() {
        document.removeEventListener("mousemove", elementDrag);
        document.removeEventListener("mouseup", closeDragElement);
      }
    });
  });
</script>

With this code in place, the fieldset element should be draggable by clicking and dragging it on the page. The JavaScript code adds event listeners for mouse events, allowing the element to be dragged around the screen.
Click to expand...
Its not working I thinks its not possible
 
Upvote 0 Downvote
carmona1426 said:
Its not working I thinks its not possible
Click to expand...
I apologize for the confusion. It seems that making a fieldset draggable with a fixed position is not straightforward. The solutions provided might not work in this case.

If you need to make the fieldset draggable, one option is to use a draggable library such as jQuery UI Draggable. Here's how you can do it:

1. Include the jQuery library and jQuery UI library in your HTML file:

HTML: 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

2. Add the draggable class to your fieldset element:

HTML: 
<fieldset id="fieldset{{$index}}" class="table-like-dropdown border p-2 bg-gradient-info draggable"
  ng-if="showDropdown3 && selectedRowIndex === $index" ng-hide="ir.item_code">
  <!-- Rest of the fieldset code -->
</fieldset>

3. Add the following JavaScript code to your HTML file, preferably before the closing </body> tag, to make the fieldset draggable:

JavaScript: 
<script>
  $(function() {
    $(".draggable").draggable();
  });
</script>

With this code in place, the fieldset element should be draggable on the page. You can click and drag it around the screen.

Note that this solution relies on jQuery UI Draggable, so you need to include the jQuery UI library for it to work.
 
Upvote 0 Downvote
🤖 said:
I apologize for the confusion. It seems that making a fieldset draggable with a fixed position is not straightforward. The solutions provided might not work in this case.

If you need to make the fieldset draggable, one option is to use a draggable library such as jQuery UI Draggable. Here's how you can do it:

1. Include the jQuery library and jQuery UI library in your HTML file:

HTML: 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

2. Add the draggable class to your fieldset element:

HTML: 
<fieldset id="fieldset{{$index}}" class="table-like-dropdown border p-2 bg-gradient-info draggable"
  ng-if="showDropdown3 && selectedRowIndex === $index" ng-hide="ir.item_code">
  <!-- Rest of the fieldset code -->
</fieldset>

3. Add the following JavaScript code to your HTML file, preferably before the closing </body> tag, to make the fieldset draggable:

JavaScript: 
<script>
  $(function() {
    $(".draggable").draggable();
  });
</script>

With this code in place, the fieldset element should be draggable on the page. You can click and drag it around the screen.

Note that this solution relies on jQuery UI Draggable, so you need to include the jQuery UI library for it to work.
Click to expand...
Im using Jquery UI Drag and its still not working
 
Upvote 0 Downvote
carmona1426 said:
Im using Jquery UI Drag and its still not working
Click to expand...
I apologize for the confusion. It seems that making a fieldset draggable with a fixed position is not straightforward. The solutions provided might not work in this case.

If you need to make the fieldset draggable, one option is to use a draggable library such as interact.js. Here's how you can do it:

1. Include the interact.js library in your HTML file:

HTML: 
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.11/interact.min.js"></script>

2. Add the draggable class to your fieldset element:

HTML: 
<fieldset id="fieldset{{$index}}" class="table-like-dropdown border p-2 bg-gradient-info draggable"
  ng-if="showDropdown3 && selectedRowIndex === $index" ng-hide="ir.item_code">
  <!-- Rest of the fieldset code -->
</fieldset>

3. Add the following JavaScript code to your HTML file, preferably before the closing </body> tag, to make the fieldset draggable:

HTML: 
<script>
  interact('.draggable')
    .draggable({
      modifiers: [
        interact.modifiers.restrictRect({
          restriction: 'parent',
          endOnly: true
        })
      ],
      listeners: {
        start(event) {
          event.interactable.draggable({
            inertia: true,
            modifiers: [
              interact.modifiers.restrictRect({
                restriction: 'parent',
                endOnly: true
              })
            ]
          });
        },
        move(event) {
          const { dx, dy } = event;
          const { x, y } = event.target.dataset;

          const newX = parseInt(x || '0', 10) + dx;
          const newY = parseInt(y || '0', 10) + dy;

          event.target.style.transform = `translate(${newX}px, ${newY}px)`;
          event.target.dataset.x = newX;
          event.target.dataset.y = newY;
        }
      }
    });
</script>

With this code in place, the fieldset element should be draggable on the page. You can click and drag it around the screen.

Note that this solution relies on the interact.js library. Make sure to include the library in your HTML file for it to work.
 
Upvote 0 Downvote
🤖 said:
I apologize for the confusion. It seems that making a fieldset draggable with a fixed position is not straightforward. The solutions provided might not work in this case.

If you need to make the fieldset draggable, one option is to use a draggable library such as interact.js. Here's how you can do it:

1. Include the interact.js library in your HTML file:

HTML: 
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.11/interact.min.js"></script>

2. Add the draggable class to your fieldset element:

HTML: 
<fieldset id="fieldset{{$index}}" class="table-like-dropdown border p-2 bg-gradient-info draggable"
  ng-if="showDropdown3 && selectedRowIndex === $index" ng-hide="ir.item_code">
  <!-- Rest of the fieldset code -->
</fieldset>

3. Add the following JavaScript code to your HTML file, preferably before the closing </body> tag, to make the fieldset draggable:

HTML: 
<script>
  interact('.draggable')
    .draggable({
      modifiers: [
        interact.modifiers.restrictRect({
          restriction: 'parent',
          endOnly: true
        })
      ],
      listeners: {
        start(event) {
          event.interactable.draggable({
            inertia: true,
            modifiers: [
              interact.modifiers.restrictRect({
                restriction: 'parent',
                endOnly: true
              })
            ]
          });
        },
        move(event) {
          const { dx, dy } = event;
          const { x, y } = event.target.dataset;

          const newX = parseInt(x || '0', 10) + dx;
          const newY = parseInt(y || '0', 10) + dy;

          event.target.style.transform = `translate(${newX}px, ${newY}px)`;
          event.target.dataset.x = newX;
          event.target.dataset.y = newY;
        }
      }
    });
</script>

With this code in place, the fieldset element should be draggable on the page. You can click and drag it around the screen.

Note that this solution relies on the interact.js library. Make sure to include the library in your HTML file for it to work.
Click to expand...
Wow its working using interact.js but I want that it will go to the direction where I drag it and stays in its position where I drag the table!
 
Upvote 0 Downvote

Similar threads

Popular Tags

android api app arduino bot c c++ capstone capstone project code coding coding and programming css database developer development help how how to html in java javascript language laravel mag mysql need patulong php program programmer programming programming language project python question react script sql system thesis tutorial udemy vb.net visual basic web web development website with

About this Thread

  • 9
    Replies
  • 264
    Views
  • 3
    Participants
Last reply from:
Prophecy666

New Topics

Popular On This Forum

Online statistics

Members online
1,122
Guests online
5,268
Total visitors
6,390
Back
Top