Add images that can be dragged in jquery-ui and QuoJS

Using jquery-ui and QuoJS together, we create something called "You can move images by dragging, and you can grow them by pressing them longer."

<img src="img/logo.png" class="dragable" id="button3">

Press and hold this image to

$$('#button3') .hold(function(){
 varele= document.createElement("img");
 ele.setAttribute("src", "img/logo.png");
 ele.setAttribute("class", "draggableui-draggableui-draggable-handle");
 ele.setAttribute("id", "button3");
 ele.setAttribute("style", "position:relative;left:0px;top:0px;");
 document.body.appendChild(ele);
});

I tried to add the same image with this QuoJS.
Yes, the image has been added, but you can't drag or hold it for a long time.

jquery-ui

2022-09-30 20:19

2 Answers

Note: Eventually, I fixed the element I added that hold did not work.

As with jQueryUI official sample, Draggable must be called .draggable() to apply Draggable.

Also, there is a method using event bubbling such as .live() to handle events for elements that will be added later, but it doesn't seem to work for Draggable.As Kotatsu wrote, you will need to reconfigure the elements when you add them.Or...

jQuery Drag And Drop Using Live Events-Stack Overflow

This person seems to be monitoring the mouseover event with .live() and calling .draggable().

In addition, jQueryUI does not support touch devices such as tablets, so if necessary, you can use jQuery UI Touch Punch.

First of all, it's not good to have more than one element with the same id, so use class instead.

In addition, use the event bubbling described above to receive events from added elements..live() is integrated into jQuery 1.7 and later .on(events, selector, handler) so you can use it.

I wrote element generation in jQuery.The background color has been changed to make the added elements easier to understand.

$(function(){
    $('.button') .draggable();
    
    $$(document).on('hold', '.button', function(){
        // change the color to make it easier to understand the added elements
        var color=Math.random().toString(16).slice(-6);
      
        $('<img class="button">')
        .attr('src', 'http://dummyimage.com/100x100/'+color+'/fff')
        .draggable()//Make it dragable...
        .appendTo('body'); // Add to body
    });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quo.js/2.3.6/quo.min.js"></script>

<img src="http://dummyimage.com/100x100/8c8c8c/fff" class="button"/>

2022-09-30 20:19

一応 I tried to use the on method based on your answer, but the way you do it is much smarter.

The drag was done in jQueryUI.

hold is not reflected in added elements.
This means that dynamically generated elements do not have hold events registered.

$$( document).ready(function(){

  // You can drag the first element.
  $('.draggable') .draggable();

  $$(document).on('hold', '.button', function(){

    varele= document.createElement("img");
    ele.setAttribute("src", "img/logo.png");
    ele.setAttribute("class", "button3draggableui-draggableui-draggable-handle");
    ele.setAttribute("style", "position:relative;left:0px;top:0px;");
    document.body.appendChild(ele);

    // Add elements that can be dragged
    $('.draggable') .draggable();
  });

});

2022-09-30 20:19

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656