0
Hallo Ich habe Folge Code bekam (bitte eine Tablette verwenden):Handhabung on-lang drücken und ng Sie auf
body {
font-family: Roboto;
box-sizing: border-box
}
.cContent {
display: flex;
flex-direction: column;
}
.cHeaders {
display: flex;
flex-direction: row;
}
.cHeader {
background-color: rgb(141, 141, 142);
color: white;
padding: 10px;
margin-left: 10px;
margin-bottom: 5px;
}
.cThemeHeader {
width: 300px;
}
.cItemHeader {
width: 300px;
}
.cCountHeader {
width: 80px;
text-align: center
}
.cData {
display: flex;
}
.cRow {
display: flex;
flex-direction: column;
}
.cItemRow {
display: flex;
width: 300px;
}
.cBox {
background-color: rgb(208, 229, 199);
color: #4a7f35;
padding: 10px;
margin-left: 10px;
margin-bottom: 5px;
}
.cTheme {
width: 300px;
}
.cItem {
background-color: white;
color: #4a7f35;
border: 1px solid #4a7f35;
padding-left: 5px;
padding-right: 5px;
margin-right: 10px;
cursor: pointer;
font-size: 12px;
height: 18px;
}
.cCount {
width: 80px;
background-color: #4a7f35;
color: white;
text-align: center
}
.cWindow {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
body {
font-family: Arial;
}
.cBox {
height: 30px;
font-size: 20px;
line-height: 30px;
}
.cItem {
height: 30px;
font-size: 20px;
line-height: 30px;
}
}<!doctype html>
<html ng-app="myApp" ng-controller="myController">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Langer Klick</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
angular.module("myApp", ['ngTouch']).controller("myController", function($scope) {
$scope.dataList = [{
id: 1,
count: 0,
text: 'Leistung nach Bedarf',
items: [{
id: 1,
text: 'bei Bedarf'
}]
}, {
id: 2,
count: 0,
text: 'Leistung je 2 stündlich',
items: [{
id: 1,
text: '11:00'
}, {
id: 2,
text: '15:00'
}]
}, {
id: 3,
count: 0,
text: 'Leistung auf einen fixen Zeitpunkt',
items: [{
id: 1,
text: '15:00'
}, {
id: 2,
text: '16:00'
}]
}];
$scope.isTablet = false;
$scope.hideBox = function(event) {
$(event.target).hide();
}
$scope.closeWindow = function() {
$scope.isTablet = false;
}
$scope.helloWorld = function() {
$scope.isTablet = true;
}
}).directive('onLongPress', function($timeout) {
return {
restrict: 'A',
link: function($scope, $elm, $attrs) {
$elm.bind('touchstart', function(evt) {
// Locally scoped variable that will keep track of the long press
$scope.longPress = true;
// We'll set a timeout for 600 ms for a long press
$timeout(function() {
if ($scope.longPress) {
// If the touchend event hasn't fired,
// apply the function given in on the element's on-long-press attribute
$scope.$apply(function() {
$scope.$eval($attrs.onLongPress)
});
}
}, 600);
});
$elm.bind('touchend', function(evt) {
// Prevent the onLongPress event from firing
$scope.longPress = false;
// If there is an on-touch-end function attached to this element, apply it
if ($attrs.onTouchEnd) {
$scope.$apply(function() {
$scope.$eval($attrs.onTouchEnd)
});
}
});
}
};
});
</script>
<script src="./removeItem.js"></script>
</head>
<body>
<div class="cContent">
<div class="cHeaders">
<div class="cHeader cThemeHeader">Katalog</div>
<div class="cHeader cItemHeader">Plan</div>
<div class="cHeader cCountHeader">Ist</div>
</div>
<div class="cData" ng-repeat="data in dataList">
<div class="cThemeRow">
<div class="cBox cTheme">{{data.text}}</div>
</div>
<div class="cBox cItemRow">
<div ng-repeat="item in data.items" class="cItem" ng-click="data.count = data.count + 1; hideBox($event);" on-long-press="helloWorld();">{{item.text}}</div>
</div>
<div class="cCountRow">
<div class="cBox cCount">{{data.count}}</div>
</div>
</div>
</div>
<div class="cWindow" ng-if="isTablet" ng-click="closeWindow();">HI, I'M A TEST WINDOW!</div>
</body>
</html>Ich möchte den weißen Kasten entfernen .cItem wenn Ich klicke darauf (normaler Klick mit der Maus oder normaler Touch-Klick). Das ist gut. Ich möchte auch ein Fenster mit einem langen gedrückten Touch auf dem Tablet öffnen, aber nicht die Box entfernen. Die lange gedrückte Taste funktioniert und öffnet das Fenster, aber entfernt auch die Box (überprüfen Sie dies mit einem Tablett). Wie kann ich das Fenster einfach öffnen, ohne es zu entfernen (nur Funktion eines on-long-press nicht auch ng-click)? Ich möchte auch den Standard eines langen Drückens auf dem Tablet entfernen (Markierungstext etc.) und einfach das Fenster öffnen. Irgendwelche Ideen? Vielen Dank.
Es funktioniert dank :) – MrBuggy