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