[JQueryUI]draggableのenableとdisable、flagを用いた制御

ある画像をクリックしたときにdraggableを有効に、それ以外を押したときに無効にするプログラムが作りたいです。私が考えたソースは以下の通りです。説明させていただくと、("#test")が画像の
idとなり、skOuterClickはあるプラグインを用いた（#test意外をクリックしたとき）という意味です。そして("#con")に現在のフラグを表示させています。alertも同じように確認用です。
このプログラムを実行したとき、flagの値はちゃんと変わっているのですが、なぜかflagが1のときの処理が実行されません。エラーもとくに出ておらず非常に困っています。助けてください。
var flag = -1;
$("#test").click(function(){
flag = 1;
$("#con").text(flag);
});
$("#test").skOuterClick(function(){
flag=-1;
$("#con").text(flag);
});

	if(flag == -1){
	alert("-1");
	$("#test").draggable('enable'); 
	$("#test").addClass("line");
	}
	else if(flag == 1){
	alert("1");
	$("#test").draggable('disable');}

[html]
<img id="test" class="" src="C:\testhtml\image\kitan.jpg">
<p id="con"></p>

行動規範の内容に同意します

回答1件

ベストアンサー

$this.draggable('enable')の前に、$this.draggable() を実行しないとエラーがでませんか？
あと、addClassした後は、removeClassはいりませんか？
flagは function(){}の外で先に宣言しておかないと、 function(){} 間で引き継がれなていないなかったのではないでしょうか。

skOuterClickが分かりませんでしたので、以下に似たように動作するものを作って見ました。
ファイル保存して、拡張子を.htmlにしてブラウザに放り込んでみてください。
画像ファイルはお任せします ;-p

HTML
1<html>
2<head>
3<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
4<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
5<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
6
7<script>
8$(document).ready(function(){
9  var flag=0;
10  $("#test").draggable();  
11  $("#test").mousedown(
12    function(){ 
13      flag = 1; 
14      $("#con").text(flag); 
15      $("#test").draggable('enable');  
16      $("#test").addClass("line"); 
17    });
18
19  $("#test").mouseup(
20    function(){
21      flag=-1; 
22      $("#con").text(flag);
23      $("#test").draggable('disable');
24      $("#test").removeClass("line"); 
25    }
26  ); 
27});
28
29</script>
30</head>
31<body>
32<img id="test" src="https://cdn.teratail.com/uploads/avatars/20436/71Co1ZWT_thumbnail.jpg?1435125075">
33<div id="con"></div>
34</body>
35</html>