Как я могу создать jquery, созданный div, который можно перетаскивать?

Привет мне было интересно, если бы было возможным решением создания перемещаемой DIV, который создается в JavaScript, например:Как я могу создать jquery, созданный div, который можно перетаскивать?

var output = " "; 
output+= ' <div class=" image">'; 
output+= ' <p class="p-id"><strong>' + data.properties[i].id+ '<strong></p>'; 
output+= '<img class="pic" src="'+ data.staff[i].picture + '"/>'; 
output+= '</div>'; 

document.getElementById("right").innerHTML = output;

есть способ, чтобы сделать этот класс ДИВ = «образ» перетаскиваемым так проблем им с с ним и хотелось бы знать, есть ли возможное решение. Помощь будет оценена

Чтобы сделать ее более понятной, я хочу, чтобы метод, похожий на этот код, который создает java, созданный <div class="image"> draggable. Я пробовал этот метод:

$(".image ").draggable({ 
revert:true, 

    drag:function() { 
    $(this).addClass("active"); 
    $(this).closest(".class ").addClass("active"); 
    }, 

    stop:function() { 
    $(this).removeClass("active").closest(".image").removeClass("active"); 
    } 
});

источник

2017-01-07 user7388968

спасибо всем вам я сумел заставить его работать с помощью Gerjans ответа. спасибо также КуджАслани за ответ на мой вопрос. – user7388968

если вы используете JQuery-UI, то вы можете просто добавить $('.image').draggable(); после добавления элемента в DOM.

var output = " "; 
 
output+= ' <div class=" image">'; 
 
output+= ' <p class="p-id"><strong>#<strong></p>'; 
 
output+= '<img class="pic" src="#"/>'; 
 
output+= '</div>'; 
 

 
document.getElementById("right").innerHTML = output; 
 
$('.image').draggable();

.image { 
 
    width:100px; 
 
    height: 100px; 
 
    background-color: red; 
 
}

<html> 
 
    <head> 
 
    <script 
 
      src="https://code.jquery.com/jquery-3.1.1.js" 
 
      integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" 
 
      crossorigin="anonymous"></script> 
 
    <script 
 
      src="http://code.jquery.com/ui/1.12.1/jquery-ui.js" 
 
      integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" 
 
      crossorigin="anonymous"></script> 
 
    </head> 
 
    <body> 
 
    <div id="right"></div> 
 
    </body> 
 
</html>

источник

2017-01-07 22:11:14 Gerjan

yup Этот метод работал благодаря помощи Gerjan – user7388968

Нравится?

div { 
 
    border: 1px solid; 
 
    width: 200px; 
 
    height: 200px; 
 
    resize: both; 
 
    overflow: auto; 
 
    background: #d2d2d2; 
 
}

<div> 
 
</div>

Проверьте это: http://www.w3schools.com/cssref/css3_pr_resize.asp

источник

2017-01-07 22:00:10 KujAslani

Я имею в виду, если есть способ назвать этот jquery создан div, поэтому его можно сделать draggable, но спасибо за предложение – user7388968

Если это то, что вы имели в виду под «draggable». если вы хотите, чтобы можно было перетащить всю коробку, а затем проверить ответ @ Gerjan. – KujAslani

ответ

Смежные вопросы