1
これは、exampleを見ましたが、アイテム全体がドラッグ可能です。ユーザーがカーソルを移動してテキストのみをクリックしたときに適用するようにドラッグを変更しようとしましたが、うまくいかなかった：テキストが表示されているときにのみドラッグする方法
誰かがこれを行う方法を知っていますか？
$scope.sortableOptions = {
update: ..
},
stop: ..
},
handle: '.handle'
};
ここで私の全コードです。
<ul class="list logList">
<li ng-repeat="entry in sortingLog track by $index" class="logItem">
<span class="handle"> {{entry}} </span>
</li>
</ul>
var myapp = angular.module('sortableApp', ['ui.sortable']);
myapp.controller('sortableController', function ($scope) {
var tmpList = [];
for (var i = 1; i <= 6; i++){
tmpList.push({
text: 'Item ' + i,
value: i
});
}
$scope.list = tmpList;
$scope.sortingLog = [];
$scope.sortableOptions = {
update: function(e, ui) {
var logEntry = tmpList.map(function(i){
return i.value;
}).join(', ');
$scope.sortingLog.push('Update: ' + logEntry);
},
stop: function(e, ui) {
// this callback has the changed model
var logEntry = tmpList.map(function(i){
return i.value;
}).join(', ');
$scope.sortingLog.push('Stop: ' + logEntry);
},
handle: '.handle'
};
});.list {
\t list-style: none outside none;
\t margin: 10px 0 30px;
}
.item {
\t width: 200px;
\t padding: 5px 10px;
\t margin: 5px 0;
\t border: 2px solid #444;
\t border-radius: 5px;
\t background-color: #EA8A8A;
\t font-size: 1.1em;
\t font-weight: bold;
\t text-align: center;
\t cursor: move;
}
/*** Extra ***/
body {
\t font-family: Verdana, 'Trebuchet ms', Tahoma;
}
.logList {
\t margin-top: 20px;
\t width: 250px;
\t min-height: 200px;
\t padding: 5px 15px;
\t border: 5px solid #000;
\t border-radius: 15px;
}
.logList:before {
\t content: 'log';
\t padding: 0 5px;
\t position: relative;
\t top: -1.1em;
\t background-color: #FFF;
}
.container {
\t width: 600px;
\t margin: auto;
}
h2 {
\t text-align: center;
}
.floatleft {
float: left;
}
.clear {
clear: both;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="sortableApp" ng-controller="sortableController" class="container">
<h2>ui.sortable single minified cdn file</h2>
<div class="floatleft">
<ul ui-sortable="sortableOptions" ng-model="list" class="list">
<li ng-repeat="item in list" class="item">
{{item.text}}
</li>
</ul>
</div>
<div class="floatleft" style="margin-left: 20px;">
<ul class="list logList">
<li ng-repeat="entry in sortingLog track by $index" class="logItem">
<span class="handle"> {{entry}} </span>
</li>
</ul>
</div>
<div class="clear"></div>
<script src="http://cdn.jsdelivr.net/g/[email protected],[email protected]%28jquery.ui.core.min.js+jquery.ui.widget.min.js+jquery.ui.mouse.min.js+jquery.ui.sortable.min.js%29,[email protected],angular.ui-sortable"></script>
</div>
例は私のために機能しません。 – Aslam