jqueryで作成したdivをドラッグ可能にするにはどうすればよいですか？

例えばJavaScriptで作成されたドラッグ可能なdiv要素を作成するための可能な解決策があった場合こんにちは、私は思っていた：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;

はイムが問題を抱えているため、このdivのクラス=「画像」ドラッグを作るための方法があります可能な解決策があるかどうかを知りたいと思っています。ヘルプが感謝される

私はより多くのコードを以下のように見えるようにするために、<div class="image">を作成したJavaをドラッグ可能にする方法が必要です。私はこの方法を試みました：

$(".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答えの助けを借りて作業を得ることができました。私の質問に答えるKujAslaniにも感謝します。 – user7388968

をあなたはjQueryの-UIを使用している場合は、DOMに要素を追加した後、あなたがちょうど$('.image').draggable();を追加することができます。あなたのすべてに

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

この方法はヘルプ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を呼び出す方法があれば、それはドラッグ可能にすることができますが、提案に感謝します – user7388968

"draggable"の意味であれば。ボックス全体をドラッグして@Gerjanの答えをチェックできるようにしたいのであれば。 – KujAslani

jqueryで作成したdivをドラッグ可能にするにはどうすればよいですか？

答えて

関連する問題